<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li class="active"><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 什么是WebPack">1. 什么是WebPack</a></li><li><a href="#t12. 初始化项目">2. 初始化项目</a></li><li><a href="#t23. 快速上手">3. 快速上手</a><ul><li><a href="#t33.1 webpack核心概念">3.1 webpack核心概念</a></li><li><a href="#t43.2 配置webpack">3.2 配置webpack</a><ul><li><a href="#t53.2.1 创建src目录">3.2.1 创建src目录</a></li><li><a href="#t63.2.2 创建dist目录">3.2.2 创建dist目录</a></li><li><a href="#t73.2.3 基本配置文件">3.2.3 基本配置文件</a></li><li><a href="#t83.2.4 创建index.html文件">3.2.4 创建index.html文件</a></li></ul></li></ul></li><li><a href="#t94. 配置开发服务器">4. 配置开发服务器</a></li><li><a href="#t105. 支持加载css文件">5. 支持加载css文件</a><ul><li><a href="#t115.1 什么是Loader">5.1 什么是Loader</a></li><li><a href="#t125.2 loader三种写法">5.2 loader三种写法</a><ul><li><a href="#t135.2.1 loader">5.2.1 loader</a></li><li><a href="#t145.2.2 use">5.2.2 use</a></li><li><a href="#t155.2.3 use+loader">5.2.3 use+loader</a></li></ul></li></ul></li><li><a href="#t166. 插件">6. 插件</a><ul><li><a href="#t176.1 自动产出html">6.1 自动产出html</a></li></ul></li><li><a href="#t187. 支持图片">7. 支持图片</a><ul><li><a href="#t197.1 手动添加图片">7.1 手动添加图片</a></li><li><a href="#t207.2 JS中引入图片">7.2 JS中引入图片</a><ul><li><a href="#t217.2.1 JS">7.2.1 JS</a></li><li><a href="#t227.2.2 webpack.config.js">7.2.2 webpack.config.js</a></li></ul></li><li><a href="#t237.3 在CSS中引入图片">7.3 在CSS中引入图片</a><ul><li><a href="#t247.3.1 CSS">7.3.1 CSS</a></li><li><a href="#t257.3.2 HTML">7.3.2 HTML</a></li></ul></li></ul></li><li><a href="#t268. 分离CSS">8. 分离CSS</a><ul><li><a href="#t278.1  安装依赖模块">8.1  安装依赖模块</a></li><li><a href="#t288.2 配置webpack.config.js">8.2 配置webpack.config.js</a></li><li><a href="#t298.3 压缩JS和CSS">8.3 压缩JS和CSS</a></li><li><a href="#t308.3 css和image存放单独目录">8.3 css和image存放单独目录</a></li><li><a href="#t318.3 在HTML中使用图片">8.3 在HTML中使用图片</a></li></ul></li><li><a href="#t329. 编译less 和 sass">9. 编译less 和 sass</a><ul><li><a href="#t339.1 安装less">9.1 安装less</a></li><li><a href="#t349.2 编写样式">9.2 编写样式</a></li></ul></li><li><a href="#t3510. 处理CSS3属性前缀">10. 处理CSS3属性前缀</a></li><li><a href="#t3611. 转义ES6/ES7/JSX">11. 转义ES6/ES7/JSX</a><ul><li><a href="#t3711.1  安装依赖包">11.1  安装依赖包</a></li><li><a href="#t3811.2 decorator">11.2 decorator</a></li><li><a href="#t3911.3 webpack.config.js">11.3 webpack.config.js</a></li><li><a href="#t4011.4 babel runtime">11.4 babel runtime</a></li><li><a href="#t4111.5 ESLint校验代码格式规范">11.5 ESLint校验代码格式规范</a></li></ul></li><li><a href="#t4212. 如何调试打包后的代码">12. 如何调试打包后的代码</a></li><li><a href="#t4313.打包第三方类库">13.打包第三方类库</a><ul><li><a href="#t4413.1 直接引入">13.1 直接引入</a></li><li><a href="#t4513.2 插件引入">13.2 插件引入</a></li><li><a href="#t4613.3 expose-loader">13.3 expose-loader</a></li><li><a href="#t4713.4 externals">13.4 externals</a></li></ul></li><li><a href="#t4814. watch">14. watch</a></li><li><a href="#t4915. 添加商标">15. 添加商标</a></li><li><a href="#t5016. 拷贝静态文件">16. 拷贝静态文件</a></li><li><a href="#t5117. 打包前先清空输出目录">17. 打包前先清空输出目录</a></li><li><a href="#t5218. 服务器代理">18. 服务器代理</a><ul><li><a href="#t5318.1 不修改路径">18.1 不修改路径</a></li><li><a href="#t5418.2 修改路径">18.2 修改路径</a></li><li><a href="#t5518.3 before after">18.3 before after</a></li><li><a href="#t5618.4 webpack-dev-middleware">18.4 webpack-dev-middleware</a></li></ul></li><li><a href="#t5719. resolve解析">19. resolve解析</a><ul><li><a href="#t5819.1 extensions">19.1 extensions</a></li><li><a href="#t5919.2 alias">19.2 alias</a></li><li><a href="#t6019.3 modules">19.3 modules</a></li><li><a href="#t6119.4 mainFields">19.4 mainFields</a></li><li><a href="#t6219.5 mainFiles">19.5 mainFiles</a></li><li><a href="#t6319.6 resolveLoader">19.6 resolveLoader</a></li></ul></li><li><a href="#t6420. noParse">20. noParse</a></li><li><a href="#t6521. DefinePlugin">21. DefinePlugin</a></li><li><a href="#t6622. IgnorePlugin">22. IgnorePlugin</a></li><li><a href="#t6720. 区分环境变量">20. 区分环境变量</a><ul><li><a href="#t6820.1 环境差异">20.1 环境差异</a></li><li><a href="#t6920.2 获取mode参数">20.2 获取mode参数</a></li><li><a href="#t7020.3 封装log方法">20.3 封装log方法</a></li><li><a href="#t7120.4 拆分配置">20.4 拆分配置</a></li></ul></li><li><a href="#t7221. 多入口">21. 多入口</a></li><li><a href="#t7322. 对图片进行压缩和优化">22. 对图片进行压缩和优化</a></li><li><a href="#t74参考">参考</a><ul><li><a href="#t75参考文档">参考文档</a></li><li><a href="#t76常用loader列表">常用loader列表</a><ul><li><a href="#t77文件">文件</a></li><li><a href="#t78JSON">JSON</a></li><li><a href="#t79转换编译(Transpiling)">转换编译(Transpiling)</a></li><li><a href="#t80模板(Templating)">模板(Templating)</a></li><li><a href="#t81样式">样式</a></li><li><a href="#t82清理和测试(Linting && Testing)">清理和测试(Linting && Testing)</a></li><li><a href="#t83框架(Frameworks)">框架(Frameworks)</a></li></ul></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. &#x4EC0;&#x4E48;&#x662F;WebPack">1. &#x4EC0;&#x4E48;&#x662F;WebPack <a href="#t01. &#x4EC0;&#x4E48;&#x662F;WebPack"> # </a></h2>
<p>WebPack&#x53EF;&#x4EE5;&#x770B;&#x505A;&#x662F;&#x6A21;&#x5757;&#x6253;&#x5305;&#x673A;&#xFF1A;&#x5B83;&#x505A;&#x7684;&#x4E8B;&#x60C5;&#x662F;&#xFF0C;&#x5206;&#x6790;&#x4F60;&#x7684;&#x9879;&#x76EE;&#x7ED3;&#x6784;&#xFF0C;&#x627E;&#x5230;JavaScript&#x6A21;&#x5757;&#x4EE5;&#x53CA;&#x5176;&#x5B83;&#x7684;&#x4E00;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x8FD0;&#x884C;&#x7684;&#x62D3;&#x5C55;&#x8BED;&#x8A00;&#xFF08;Scss&#xFF0C;TypeScript&#x7B49;&#xFF09;&#xFF0C;&#x5E76;&#x5C06;&#x5176;&#x6253;&#x5305;&#x4E3A;&#x5408;&#x9002;&#x7684;&#x683C;&#x5F0F;&#x4EE5;&#x4F9B;&#x6D4F;&#x89C8;&#x5668;&#x4F7F;&#x7528;&#x3002;</p>
<p><img src="http://img.zhufengpeixun.cn/webpack.jpeg" alt="webpack"></p>
<p>&#x6784;&#x5EFA;&#x5C31;&#x662F;&#x628A;&#x6E90;&#x4EE3;&#x7801;&#x8F6C;&#x6362;&#x6210;&#x53D1;&#x5E03;&#x5230;&#x7EBF;&#x4E0A;&#x7684;&#x53EF;&#x6267;&#x884C; JavaScrip&#x3001;CSS&#x3001;HTML &#x4EE3;&#x7801;&#xFF0C;&#x5305;&#x62EC;&#x5982;&#x4E0B;&#x5185;&#x5BB9;&#x3002;</p>
<ul>
<li>&#x4EE3;&#x7801;&#x8F6C;&#x6362;&#xFF1A;TypeScript &#x7F16;&#x8BD1;&#x6210; JavaScript&#x3001;SCSS &#x7F16;&#x8BD1;&#x6210; CSS &#x7B49;&#x3002;</li>
<li>&#x6587;&#x4EF6;&#x4F18;&#x5316;&#xFF1A;&#x538B;&#x7F29; JavaScript&#x3001;CSS&#x3001;HTML &#x4EE3;&#x7801;&#xFF0C;&#x538B;&#x7F29;&#x5408;&#x5E76;&#x56FE;&#x7247;&#x7B49;&#x3002;</li>
<li>&#x4EE3;&#x7801;&#x5206;&#x5272;&#xFF1A;&#x63D0;&#x53D6;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x7684;&#x516C;&#x5171;&#x4EE3;&#x7801;&#x3001;&#x63D0;&#x53D6;&#x9996;&#x5C4F;&#x4E0D;&#x9700;&#x8981;&#x6267;&#x884C;&#x90E8;&#x5206;&#x7684;&#x4EE3;&#x7801;&#x8BA9;&#x5176;&#x5F02;&#x6B65;&#x52A0;&#x8F7D;&#x3002;</li>
<li>&#x6A21;&#x5757;&#x5408;&#x5E76;&#xFF1A;&#x5728;&#x91C7;&#x7528;&#x6A21;&#x5757;&#x5316;&#x7684;&#x9879;&#x76EE;&#x91CC;&#x4F1A;&#x6709;&#x5F88;&#x591A;&#x4E2A;&#x6A21;&#x5757;&#x548C;&#x6587;&#x4EF6;&#xFF0C;&#x9700;&#x8981;&#x6784;&#x5EFA;&#x529F;&#x80FD;&#x628A;&#x6A21;&#x5757;&#x5206;&#x7C7B;&#x5408;&#x5E76;&#x6210;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x3002;</li>
<li>&#x81EA;&#x52A8;&#x5237;&#x65B0;&#xFF1A;&#x76D1;&#x542C;&#x672C;&#x5730;&#x6E90;&#x4EE3;&#x7801;&#x7684;&#x53D8;&#x5316;&#xFF0C;&#x81EA;&#x52A8;&#x91CD;&#x65B0;&#x6784;&#x5EFA;&#x3001;&#x5237;&#x65B0;&#x6D4F;&#x89C8;&#x5668;&#x3002;</li>
<li>&#x4EE3;&#x7801;&#x6821;&#x9A8C;&#xFF1A;&#x5728;&#x4EE3;&#x7801;&#x88AB;&#x63D0;&#x4EA4;&#x5230;&#x4ED3;&#x5E93;&#x524D;&#x9700;&#x8981;&#x6821;&#x9A8C;&#x4EE3;&#x7801;&#x662F;&#x5426;&#x7B26;&#x5408;&#x89C4;&#x8303;&#xFF0C;&#x4EE5;&#x53CA;&#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x662F;&#x5426;&#x901A;&#x8FC7;&#x3002;</li>
<li>&#x81EA;&#x52A8;&#x53D1;&#x5E03;&#xFF1A;&#x66F4;&#x65B0;&#x5B8C;&#x4EE3;&#x7801;&#x540E;&#xFF0C;&#x81EA;&#x52A8;&#x6784;&#x5EFA;&#x51FA;&#x7EBF;&#x4E0A;&#x53D1;&#x5E03;&#x4EE3;&#x7801;&#x5E76;&#x4F20;&#x8F93;&#x7ED9;&#x53D1;&#x5E03;&#x7CFB;&#x7EDF;&#x3002;</li>
</ul>
<p>&#x6784;&#x5EFA;&#x5176;&#x5B9E;&#x662F;&#x5DE5;&#x7A0B;&#x5316;&#x3001;&#x81EA;&#x52A8;&#x5316;&#x601D;&#x60F3;&#x5728;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x4E2D;&#x7684;&#x4F53;&#x73B0;&#xFF0C;&#x628A;&#x4E00;&#x7CFB;&#x5217;&#x6D41;&#x7A0B;&#x7528;&#x4EE3;&#x7801;&#x53BB;&#x5B9E;&#x73B0;&#xFF0C;&#x8BA9;&#x4EE3;&#x7801;&#x81EA;&#x52A8;&#x5316;&#x5730;&#x6267;&#x884C;&#x8FD9;&#x4E00;&#x7CFB;&#x5217;&#x590D;&#x6742;&#x7684;&#x6D41;&#x7A0B;&#x3002; &#x6784;&#x5EFA;&#x7ED9;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x6CE8;&#x5165;&#x4E86;&#x66F4;&#x5927;&#x7684;&#x6D3B;&#x529B;&#xFF0C;&#x89E3;&#x653E;&#x4E86;&#x6211;&#x4EEC;&#x7684;&#x751F;&#x4EA7;&#x529B;&#x3002;</p>
<h2 id="t12. &#x521D;&#x59CB;&#x5316;&#x9879;&#x76EE;">2. &#x521D;&#x59CB;&#x5316;&#x9879;&#x76EE; <a href="#t12. &#x521D;&#x59CB;&#x5316;&#x9879;&#x76EE;"> # </a></h2>
<pre><code class="lang-js">mkdir zhufeng-webpack
cd zhufeng-webpack
npm init -y
</code></pre>
<h2 id="t23. &#x5FEB;&#x901F;&#x4E0A;&#x624B;">3. &#x5FEB;&#x901F;&#x4E0A;&#x624B; <a href="#t23. &#x5FEB;&#x901F;&#x4E0A;&#x624B;"> # </a></h2>
<h3 id="t33.1 webpack&#x6838;&#x5FC3;&#x6982;&#x5FF5;">3.1 webpack&#x6838;&#x5FC3;&#x6982;&#x5FF5; <a href="#t33.1 webpack&#x6838;&#x5FC3;&#x6982;&#x5FF5;"> # </a></h3>
<ul>
<li>Entry&#xFF1A;&#x5165;&#x53E3;&#xFF0C;Webpack &#x6267;&#x884C;&#x6784;&#x5EFA;&#x7684;&#x7B2C;&#x4E00;&#x6B65;&#x5C06;&#x4ECE; Entry &#x5F00;&#x59CB;&#xFF0C;&#x53EF;&#x62BD;&#x8C61;&#x6210;&#x8F93;&#x5165;&#x3002;</li>
<li>Module&#xFF1A;&#x6A21;&#x5757;&#xFF0C;&#x5728; Webpack &#x91CC;&#x4E00;&#x5207;&#x7686;&#x6A21;&#x5757;&#xFF0C;&#x4E00;&#x4E2A;&#x6A21;&#x5757;&#x5BF9;&#x5E94;&#x7740;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x3002;Webpack &#x4F1A;&#x4ECE;&#x914D;&#x7F6E;&#x7684; Entry &#x5F00;&#x59CB;&#x9012;&#x5F52;&#x627E;&#x51FA;&#x6240;&#x6709;&#x4F9D;&#x8D56;&#x7684;&#x6A21;&#x5757;&#x3002;</li>
<li>Chunk&#xFF1A;&#x4EE3;&#x7801;&#x5757;&#xFF0C;&#x4E00;&#x4E2A; Chunk &#x7531;&#x591A;&#x4E2A;&#x6A21;&#x5757;&#x7EC4;&#x5408;&#x800C;&#x6210;&#xFF0C;&#x7528;&#x4E8E;&#x4EE3;&#x7801;&#x5408;&#x5E76;&#x4E0E;&#x5206;&#x5272;&#x3002;</li>
<li>Loader&#xFF1A;&#x6A21;&#x5757;&#x8F6C;&#x6362;&#x5668;&#xFF0C;&#x7528;&#x4E8E;&#x628A;&#x6A21;&#x5757;&#x539F;&#x5185;&#x5BB9;&#x6309;&#x7167;&#x9700;&#x6C42;&#x8F6C;&#x6362;&#x6210;&#x65B0;&#x5185;&#x5BB9;&#x3002;</li>
<li>Plugin&#xFF1A;&#x6269;&#x5C55;&#x63D2;&#x4EF6;&#xFF0C;&#x5728; Webpack &#x6784;&#x5EFA;&#x6D41;&#x7A0B;&#x4E2D;&#x7684;&#x7279;&#x5B9A;&#x65F6;&#x673A;&#x6CE8;&#x5165;&#x6269;&#x5C55;&#x903B;&#x8F91;&#x6765;&#x6539;&#x53D8;&#x6784;&#x5EFA;&#x7ED3;&#x679C;&#x6216;&#x505A;&#x4F60;&#x60F3;&#x8981;&#x7684;&#x4E8B;&#x60C5;&#x3002;</li>
<li>Output&#xFF1A;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#xFF0C;&#x5728; Webpack &#x7ECF;&#x8FC7;&#x4E00;&#x7CFB;&#x5217;&#x5904;&#x7406;&#x5E76;&#x5F97;&#x51FA;&#x6700;&#x7EC8;&#x60F3;&#x8981;&#x7684;&#x4EE3;&#x7801;&#x540E;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x3002;</li>
</ul>
<blockquote>
<p>Webpack &#x542F;&#x52A8;&#x540E;&#x4F1A;&#x4ECE;<code>Entry</code>&#x91CC;&#x914D;&#x7F6E;&#x7684;<code>Module</code>&#x5F00;&#x59CB;&#x9012;&#x5F52;&#x89E3;&#x6790; Entry &#x4F9D;&#x8D56;&#x7684;&#x6240;&#x6709; Module&#x3002; &#x6BCF;&#x627E;&#x5230;&#x4E00;&#x4E2A; Module&#xFF0C; &#x5C31;&#x4F1A;&#x6839;&#x636E;&#x914D;&#x7F6E;&#x7684;<code>Loader</code>&#x53BB;&#x627E;&#x51FA;&#x5BF9;&#x5E94;&#x7684;&#x8F6C;&#x6362;&#x89C4;&#x5219;&#xFF0C;&#x5BF9; Module &#x8FDB;&#x884C;&#x8F6C;&#x6362;&#x540E;&#xFF0C;&#x518D;&#x89E3;&#x6790;&#x51FA;&#x5F53;&#x524D; Module &#x4F9D;&#x8D56;&#x7684; Module&#x3002; &#x8FD9;&#x4E9B;&#x6A21;&#x5757;&#x4F1A;&#x4EE5; Entry &#x4E3A;&#x5355;&#x4F4D;&#x8FDB;&#x884C;&#x5206;&#x7EC4;&#xFF0C;&#x4E00;&#x4E2A; Entry &#x548C;&#x5176;&#x6240;&#x6709;&#x4F9D;&#x8D56;&#x7684; Module &#x88AB;&#x5206;&#x5230;&#x4E00;&#x4E2A;&#x7EC4;&#x4E5F;&#x5C31;&#x662F;&#x4E00;&#x4E2A; <code>Chunk</code>&#x3002;&#x6700;&#x540E; Webpack &#x4F1A;&#x628A;&#x6240;&#x6709; Chunk &#x8F6C;&#x6362;&#x6210;&#x6587;&#x4EF6;&#x8F93;&#x51FA;&#x3002; &#x5728;&#x6574;&#x4E2A;&#x6D41;&#x7A0B;&#x4E2D; Webpack &#x4F1A;&#x5728;&#x6070;&#x5F53;&#x7684;&#x65F6;&#x673A;&#x6267;&#x884C; Plugin &#x91CC;&#x5B9A;&#x4E49;&#x7684;&#x903B;&#x8F91;&#x3002;</p>
</blockquote>
<h3 id="t43.2 &#x914D;&#x7F6E;webpack">3.2 &#x914D;&#x7F6E;webpack <a href="#t43.2 &#x914D;&#x7F6E;webpack"> # </a></h3>
<pre><code class="lang-js">npm install webpack webpack-cli -D
</code></pre>
<h4 id="t53.2.1 &#x521B;&#x5EFA;src&#x76EE;&#x5F55;">3.2.1 &#x521B;&#x5EFA;src&#x76EE;&#x5F55; <a href="#t53.2.1 &#x521B;&#x5EFA;src&#x76EE;&#x5F55;"> # </a></h4>
<pre><code class="lang-js">mkdir src
</code></pre>
<h4 id="t63.2.2 &#x521B;&#x5EFA;dist&#x76EE;&#x5F55;">3.2.2 &#x521B;&#x5EFA;dist&#x76EE;&#x5F55; <a href="#t63.2.2 &#x521B;&#x5EFA;dist&#x76EE;&#x5F55;"> # </a></h4>
<pre><code class="lang-js">mkdir dist
</code></pre>
<h4 id="t73.2.3 &#x57FA;&#x672C;&#x914D;&#x7F6E;&#x6587;&#x4EF6;">3.2.3 &#x57FA;&#x672C;&#x914D;&#x7F6E;&#x6587;&#x4EF6; <a href="#t73.2.3 &#x57FA;&#x672C;&#x914D;&#x7F6E;&#x6587;&#x4EF6;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-built_in">module</span>.exports={
    <span class="hljs-attr">entry</span>: <span class="hljs-string">&apos;./src/index.js&apos;</span>,
    <span class="hljs-attr">output</span>: {
        <span class="hljs-attr">path</span>: path.resolve(__dirname,<span class="hljs-string">&apos;dist&apos;</span>),
        <span class="hljs-attr">filename</span>:<span class="hljs-string">&apos;bundle.js&apos;</span>
    },
    <span class="hljs-attr">module</span>: {},
    <span class="hljs-attr">plugins</span>: [],
    <span class="hljs-attr">devServer</span>: {}
}
</code></pre>
<ul>
<li>&#x521B;&#x5EFA;dist<ul>
<li>&#x521B;&#x5EFA;index.html</li>
</ul>
</li>
<li>&#x914D;&#x7F6E;&#x6587;&#x4EF6;webpack.config.js<ul>
<li>entry&#xFF1A;&#x914D;&#x7F6E;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#x7684;&#x5730;&#x5740;</li>
<li>output&#xFF1A;&#x914D;&#x7F6E;&#x51FA;&#x53E3;&#x6587;&#x4EF6;&#x7684;&#x5730;&#x5740;</li>
<li>module&#xFF1A;&#x914D;&#x7F6E;&#x6A21;&#x5757;,&#x4E3B;&#x8981;&#x7528;&#x6765;&#x914D;&#x7F6E;&#x4E0D;&#x540C;&#x6587;&#x4EF6;&#x7684;&#x52A0;&#x8F7D;&#x5668;</li>
<li>plugins&#xFF1A;&#x914D;&#x7F6E;&#x63D2;&#x4EF6;</li>
<li>devServer&#xFF1A;&#x914D;&#x7F6E;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668;</li>
</ul>
</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-built_in">module</span>.exports={
    <span class="hljs-attr">entry</span>: <span class="hljs-string">&apos;./src/index.js&apos;</span>,
    <span class="hljs-attr">output</span>: {
        <span class="hljs-attr">path</span>: path.resolve(__dirname,<span class="hljs-string">&apos;dist&apos;</span>),
        <span class="hljs-attr">filename</span>:<span class="hljs-string">&apos;bundle.js&apos;</span>
    },
    <span class="hljs-attr">module</span>: {},
    <span class="hljs-attr">plugins</span>: [],
    <span class="hljs-attr">devServer</span>: {}
}
</code></pre>
<h4 id="t83.2.4 &#x521B;&#x5EFA;index.html&#x6587;&#x4EF6;">3.2.4 &#x521B;&#x5EFA;index.html&#x6587;&#x4EF6; <a href="#t83.2.4 &#x521B;&#x5EFA;index.html&#x6587;&#x4EF6;"> # </a></h4>
<p>&#x5728;dist&#x76EE;&#x5F55;&#x4E0B;&#x521B;&#x5EFA;index.html&#x6587;&#x4EF6;</p>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;root&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;bundle.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h2 id="t94. &#x914D;&#x7F6E;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668;">4. &#x914D;&#x7F6E;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668; <a href="#t94. &#x914D;&#x7F6E;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668;"> # </a></h2>
<pre><code class="lang-js">npm i webpack-dev-server &#x2013;D
</code></pre>
<ul>
<li>contentBase &#x914D;&#x7F6E;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x8FD0;&#x884C;&#x65F6;&#x7684;&#x6587;&#x4EF6;&#x6839;&#x76EE;&#x5F55;</li>
<li>host&#xFF1A;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668;&#x76D1;&#x542C;&#x7684;&#x4E3B;&#x673A;&#x5730;&#x5740;</li>
<li>compress &#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668;&#x662F;&#x5426;&#x542F;&#x52A8;gzip&#x7B49;&#x538B;&#x7F29;</li>
<li>port&#xFF1A;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668;&#x76D1;&#x542C;&#x7684;&#x7AEF;&#x53E3;</li>
</ul>
<pre><code class="lang-diff"><span class="hljs-addition">+ devServer:{</span>
<span class="hljs-addition">+        contentBase:path.resolve(__dirname,&apos;dist&apos;),</span>
<span class="hljs-addition">+        host:&apos;localhost&apos;,</span>
<span class="hljs-addition">+        compress:true,</span>
<span class="hljs-addition">+        port:8080</span>
<span class="hljs-addition">+ }</span>
</code></pre>
<pre><code class="lang-diff"><span class="hljs-addition">+  &quot;scripts&quot;: {</span>
<span class="hljs-addition">+    &quot;build&quot;: &quot;webpack --mode development&quot;,</span>
<span class="hljs-addition">+    &quot;dev&quot;: &quot;webpack-dev-server --open --mode development &quot;</span>
<span class="hljs-addition">+  }</span>
</code></pre>
<h2 id="t105. &#x652F;&#x6301;&#x52A0;&#x8F7D;css&#x6587;&#x4EF6;">5. &#x652F;&#x6301;&#x52A0;&#x8F7D;css&#x6587;&#x4EF6; <a href="#t105. &#x652F;&#x6301;&#x52A0;&#x8F7D;css&#x6587;&#x4EF6;"> # </a></h2>
<h3 id="t115.1 &#x4EC0;&#x4E48;&#x662F;Loader">5.1 &#x4EC0;&#x4E48;&#x662F;Loader <a href="#t115.1 &#x4EC0;&#x4E48;&#x662F;Loader"> # </a></h3>
<p>&#x901A;&#x8FC7;&#x4F7F;&#x7528;&#x4E0D;&#x540C;&#x7684;Loader&#xFF0C;Webpack&#x53EF;&#x4EE5;&#x8981;&#x628A;&#x4E0D;&#x540C;&#x7684;&#x6587;&#x4EF6;&#x90FD;&#x8F6C;&#x6210;JS&#x6587;&#x4EF6;,&#x6BD4;&#x5982;CSS&#x3001;ES6/7&#x3001;JSX&#x7B49;</p>
<ul>
<li>test&#xFF1A;&#x5339;&#x914D;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x7684;&#x6269;&#x5C55;&#x540D;&#x7684;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;</li>
<li>use&#xFF1A;loader&#x540D;&#x79F0;&#xFF0C;&#x5C31;&#x662F;&#x4F60;&#x8981;&#x4F7F;&#x7528;&#x6A21;&#x5757;&#x7684;&#x540D;&#x79F0;</li>
<li>include/exclude:&#x624B;&#x52A8;&#x6307;&#x5B9A;&#x5FC5;&#x987B;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#x5939;&#x6216;&#x5C4F;&#x853D;&#x4E0D;&#x9700;&#x8981;&#x5904;&#x7406;&#x7684;&#x6587;&#x4EF6;&#x5939;</li>
<li>query&#xFF1A;&#x4E3A;loaders&#x63D0;&#x4F9B;&#x989D;&#x5916;&#x7684;&#x8BBE;&#x7F6E;&#x9009;&#x9879;</li>
</ul>
<h3 id="t125.2 loader&#x4E09;&#x79CD;&#x5199;&#x6CD5;">5.2 loader&#x4E09;&#x79CD;&#x5199;&#x6CD5; <a href="#t125.2 loader&#x4E09;&#x79CD;&#x5199;&#x6CD5;"> # </a></h3>
<ul>
<li><a href="https://www.npmjs.com/package/css-loader">css-loader</a></li>
<li><a href="https://www.npmjs.com/package/style-loader">style-loader</a></li>
</ul>
<h4 id="t135.2.1 loader">5.2.1 loader <a href="#t135.2.1 loader"> # </a></h4>
<p>&#x52A0;&#x8F7D;CSS&#x6587;&#x4EF6;&#xFF0C;CSS&#x6587;&#x4EF6;&#x6709;&#x53EF;&#x80FD;&#x5728;node_modules&#x91CC;&#xFF0C;&#x6BD4;&#x5982;bootstrap&#x548C;antd</p>
<pre><code class="lang-diff">module: {
        rules: [
            {
                test: /\.css/,
<span class="hljs-addition">+                loader:[&apos;style-loader&apos;,&apos;css-loader&apos;]</span>
            }
        ]
    }
</code></pre>
<h4 id="t145.2.2 use">5.2.2 use <a href="#t145.2.2 use"> # </a></h4>
<pre><code class="lang-diff">module: {
        rules: [
            {
                test: /\.css/,
<span class="hljs-addition">+                use:[&apos;style-loader&apos;,&apos;css-loader&apos;]</span>
            }
        ]
    },
</code></pre>
<h4 id="t155.2.3 use+loader">5.2.3 use+loader <a href="#t155.2.3 use+loader"> # </a></h4>
<pre><code class="lang-js">    <span class="hljs-built_in">module</span>: {
        <span class="hljs-attr">rules</span>: [
            {
                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css/</span>,
                <span class="hljs-attr">include</span>: path.resolve(__dirname,<span class="hljs-string">&apos;src&apos;</span>),
                <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/node_modules/</span>,
                <span class="hljs-attr">use</span>: [{
                    <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;style-loader&apos;</span>,
                    <span class="hljs-attr">options</span>: {
                        <span class="hljs-attr">insertAt</span>:<span class="hljs-string">&apos;top&apos;</span>
                    }
                },<span class="hljs-string">&apos;css-loader&apos;</span>]
            }
        ]
    }
</code></pre>
<h2 id="t166. &#x63D2;&#x4EF6;">6. &#x63D2;&#x4EF6; <a href="#t166. &#x63D2;&#x4EF6;"> # </a></h2>
<ul>
<li>&#x5728; webpack &#x7684;&#x6784;&#x5EFA;&#x6D41;&#x7A0B;&#x4E2D;&#xFF0C;plugin &#x7528;&#x4E8E;&#x5904;&#x7406;&#x66F4;&#x591A;&#x5176;&#x4ED6;&#x7684;&#x4E00;&#x4E9B;&#x6784;&#x5EFA;&#x4EFB;&#x52A1;</li>
<li>&#x6A21;&#x5757;&#x4EE3;&#x7801;&#x8F6C;&#x6362;&#x7684;&#x5DE5;&#x4F5C;&#x7531; loader &#x6765;&#x5904;&#x7406;</li>
<li>&#x9664;&#x6B64;&#x4E4B;&#x5916;&#x7684;&#x5176;&#x4ED6;&#x4EFB;&#x4F55;&#x5DE5;&#x4F5C;&#x90FD;&#x53EF;&#x4EE5;&#x4EA4;&#x7531; plugin &#x6765;&#x5B8C;&#x6210;</li>
</ul>
<h3 id="t176.1 &#x81EA;&#x52A8;&#x4EA7;&#x51FA;html">6.1 &#x81EA;&#x52A8;&#x4EA7;&#x51FA;html <a href="#t176.1 &#x81EA;&#x52A8;&#x4EA7;&#x51FA;html"> # </a></h3>
<p>&#x6211;&#x4EEC;&#x5E0C;&#x671B;&#x81EA;&#x52A8;&#x80FD;&#x4EA7;&#x51FA;HTML&#x6587;&#x4EF6;&#xFF0C;&#x5E76;&#x5728;&#x91CC;&#x9762;&#x5F15;&#x5165;&#x4EA7;&#x51FA;&#x540E;&#x7684;&#x8D44;&#x6E90;</p>
<pre><code class="lang-js">npm i html-webpack-plugin -D
</code></pre>
<ul>
<li>minify &#x662F;&#x5BF9;html&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#xFF0C;removeAttrubuteQuotes&#x662F;&#x53BB;&#x6389;&#x5C5E;&#x6027;&#x7684;&#x53CC;&#x5F15;&#x53F7;</li>
<li>hash &#x5F15;&#x5165;&#x4EA7;&#x51FA;&#x8D44;&#x6E90;&#x7684;&#x65F6;&#x5019;&#x52A0;&#x4E0A;&#x67E5;&#x8BE2;&#x53C2;&#x6570;&#xFF0C;&#x503C;&#x4E3A;&#x54C8;&#x5E0C;&#x907F;&#x514D;&#x7F13;&#x5B58;</li>
<li>template &#x6A21;&#x7248;&#x8DEF;&#x5F84;</li>
</ul>
<pre><code class="lang-diff">    plugins: [
<span class="hljs-addition">+        new HtmlWebpackPlugin({</span>
<span class="hljs-addition">+         minify: {</span>
<span class="hljs-addition">+            removeAttributeQuotes:true</span>
<span class="hljs-addition">+        },</span>
<span class="hljs-addition">+        hash: true,</span>
<span class="hljs-addition">+        template: &apos;./src/index.html&apos;,</span>
<span class="hljs-addition">+        filename:&apos;index.html&apos;</span>
    })]
</code></pre>
<h2 id="t187. &#x652F;&#x6301;&#x56FE;&#x7247;">7. &#x652F;&#x6301;&#x56FE;&#x7247; <a href="#t187. &#x652F;&#x6301;&#x56FE;&#x7247;"> # </a></h2>
<h3 id="t197.1 &#x624B;&#x52A8;&#x6DFB;&#x52A0;&#x56FE;&#x7247;">7.1 &#x624B;&#x52A8;&#x6DFB;&#x52A0;&#x56FE;&#x7247; <a href="#t197.1 &#x624B;&#x52A8;&#x6DFB;&#x52A0;&#x56FE;&#x7247;"> # </a></h3>
<pre><code class="lang-js">npm i file-loader url-loader -D
</code></pre>
<ul>
<li><a href="http://npmjs.com/package/file-loader">file-loader</a> &#x89E3;&#x51B3;CSS&#x7B49;&#x6587;&#x4EF6;&#x4E2D;&#x7684;&#x5F15;&#x5165;&#x56FE;&#x7247;&#x8DEF;&#x5F84;&#x95EE;&#x9898;</li>
<li><a href="https://www.npmjs.com/package/url-loader">url-loader</a> &#x5F53;&#x56FE;&#x7247;&#x5C0F;&#x4E8E;limit&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x628A;&#x56FE;&#x7247;BASE64&#x7F16;&#x7801;&#xFF0C;&#x5927;&#x4E8E;limit&#x53C2;&#x6570;&#x7684;&#x65F6;&#x5019;&#x8FD8;&#x662F;&#x4F7F;&#x7528;file-loader &#x8FDB;&#x884C;&#x62F7;&#x8D1D;</li>
</ul>
<h3 id="t207.2 JS&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247;">7.2 JS&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247; <a href="#t207.2 JS&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247;"> # </a></h3>
<h4 id="t217.2.1 JS">7.2.1 JS <a href="#t217.2.1 JS"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> logo=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./images/logo.png&apos;</span>);
<span class="hljs-keyword">let</span> img=<span class="hljs-keyword">new</span> Image();
img.src=logo;
<span class="hljs-built_in">document</span>.body.appendChild(img);
</code></pre>
<h4 id="t227.2.2 webpack.config.js">7.2.2 webpack.config.js <a href="#t227.2.2 webpack.config.js"> # </a></h4>
<pre><code class="lang-js">{
  <span class="hljs-attr">test</span>:<span class="hljs-regexp">/\.(jpg|png|bmp|gif|svg|ttf|woff|woff2|eot)/</span>,
    <span class="hljs-attr">use</span>:[
    {
       <span class="hljs-attr">loader</span>:<span class="hljs-string">&apos;url-loader&apos;</span>,
       <span class="hljs-attr">options</span>:{<span class="hljs-attr">limit</span>:<span class="hljs-number">4096</span>}
    }
  ]
}
</code></pre>
<h3 id="t237.3 &#x5728;CSS&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247;">7.3 &#x5728;CSS&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247; <a href="#t237.3 &#x5728;CSS&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247;"> # </a></h3>
<p>&#x8FD8;&#x53EF;&#x4EE5;&#x5728;CSS&#x6587;&#x4EF6;&#x4E2D;&#x5F15;&#x5165;&#x56FE;&#x7247;</p>
<h4 id="t247.3.1 CSS">7.3.1 CSS <a href="#t247.3.1 CSS"> # </a></h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.logo</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">355px</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">133px</span>;
    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(./images/logo.png);
    <span class="hljs-attribute">background-size</span>: cover;
}
</code></pre>
<h4 id="t257.3.2 HTML">7.3.2 HTML <a href="#t257.3.2 HTML"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;logo&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<h2 id="t268. &#x5206;&#x79BB;CSS">8. &#x5206;&#x79BB;CSS <a href="#t268. &#x5206;&#x79BB;CSS"> # </a></h2>
<p>&#x56E0;&#x4E3A;CSS&#x7684;&#x4E0B;&#x8F7D;&#x548C;JS&#x53EF;&#x4EE5;&#x5E76;&#x884C;,&#x5F53;&#x4E00;&#x4E2A;HTML&#x6587;&#x4EF6;&#x5F88;&#x5927;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x628A;CSS&#x5355;&#x72EC;&#x63D0;&#x53D6;&#x51FA;&#x6765;&#x52A0;&#x8F7D;</p>
<ul>
<li><a href="https://github.com/webpack-contrib/mini-css-extract-plugin">mini-css-extract-plugin</a></li>
<li>filename &#x6253;&#x5305;&#x5165;&#x53E3;&#x6587;&#x4EF6;</li>
<li>chunkFilename &#x7528;&#x6765;&#x6253;&#x5305;<code>import(&apos;module&apos;)</code>&#x65B9;&#x6CD5;&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x6A21;&#x5757;</li>
</ul>
<h3 id="t278.1  &#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x6A21;&#x5757;">8.1  &#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x6A21;&#x5757; <a href="#t278.1  &#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x6A21;&#x5757;"> # </a></h3>
<pre><code class="lang-js">npm install --save-dev mini-css-extract-plugin
</code></pre>
<h3 id="t288.2 &#x914D;&#x7F6E;webpack.config.js">8.2 &#x914D;&#x7F6E;webpack.config.js <a href="#t288.2 &#x914D;&#x7F6E;webpack.config.js"> # </a></h3>
<pre><code class="lang-diff">plugins: [
       //&#x53C2;&#x6570;&#x7C7B;&#x4F3C;&#x4E8E;webpackOptions.output
<span class="hljs-addition">+        new MiniCssExtractPlugin({</span>
<span class="hljs-addition">+            filename: &apos;[name].css&apos;,</span>
<span class="hljs-addition">+            chunkFilename:&apos;[id].css&apos;</span>
<span class="hljs-addition">+        }),</span>

{
                test: /\.css/,
                include: path.resolve(__dirname,&apos;src&apos;),
                exclude: /node_modules/,
                use: [{
<span class="hljs-addition">+                    loader: MiniCssExtractPlugin.loader</span>
                },&apos;css-loader&apos;]
            }

</code></pre>
<h3 id="t298.3 &#x538B;&#x7F29;JS&#x548C;CSS">8.3 &#x538B;&#x7F29;JS&#x548C;CSS <a href="#t298.3 &#x538B;&#x7F29;JS&#x548C;CSS"> # </a></h3>
<pre><code class="lang-js">npm i uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin -D
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> UglifyJsPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;uglifyjs-webpack-plugin&quot;</span>);
<span class="hljs-keyword">const</span> OptimizeCSSAssetsPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;optimize-css-assets-webpack-plugin&quot;</span>);
<span class="hljs-built_in">module</span>.exports = {
    <span class="hljs-attr">mode</span>: <span class="hljs-string">&apos;development&apos;</span>,
    <span class="hljs-attr">optimization</span>: {
        <span class="hljs-attr">minimizer</span>: [
            <span class="hljs-keyword">new</span> UglifyJsPlugin({
                <span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//&#x542F;&#x52A8;&#x7F13;&#x5B58;</span>
                parallel: <span class="hljs-literal">true</span>,<span class="hljs-comment">//&#x542F;&#x52A8;&#x5E76;&#x884C;&#x538B;&#x7F29;</span>
                <span class="hljs-comment">//&#x5982;&#x679C;&#x4E3A;true&#x7684;&#x8BDD;&#xFF0C;&#x53EF;&#x4EE5;&#x83B7;&#x5F97;sourcemap</span>
                sourceMap: <span class="hljs-literal">true</span> <span class="hljs-comment">// set to true if you want JS source maps</span>
            }),
            <span class="hljs-comment">//&#x538B;&#x7F29;css&#x8D44;&#x6E90;&#x7684;</span>
            <span class="hljs-keyword">new</span> OptimizeCSSAssetsPlugin({})
        ]
    },
</code></pre>
<h3 id="t308.3 css&#x548C;image&#x5B58;&#x653E;&#x5355;&#x72EC;&#x76EE;&#x5F55;">8.3 css&#x548C;image&#x5B58;&#x653E;&#x5355;&#x72EC;&#x76EE;&#x5F55; <a href="#t308.3 css&#x548C;image&#x5B58;&#x653E;&#x5355;&#x72EC;&#x76EE;&#x5F55;"> # </a></h3>
<ul>
<li>outputPath &#x8F93;&#x51FA;&#x8DEF;&#x5F84;</li>
<li>publicPath&#x6307;&#x5B9A;&#x7684;&#x662F;&#x6784;&#x5EFA;&#x540E;&#x5728;html&#x91CC;&#x7684;&#x8DEF;&#x5F84;</li>
</ul>
<pre><code class="lang-diff">output: {
        path: path.resolve(__dirname,&apos;dist&apos;),
        filename: &apos;bundle.js&apos;,
<span class="hljs-addition">+        publicPath:&apos;/&apos;</span>
    },
{
  test:/\.(jpg|jpeg|png|bmp|gif|svg|ttf|woff|woff2|eot)/,
  use:[
        {
          loader:&apos;url-loader&apos;,
          options:{
              limit: 4096,
<span class="hljs-addition">+              outputPath: &apos;images&apos;,</span>
<span class="hljs-addition">+              publicPath:&apos;/images&apos;</span>
          }
        }
     ]
}

plugins: [
        new MiniCssExtractPlugin({
<span class="hljs-addition">+            filename: &apos;css/[name].css&apos;,</span>
<span class="hljs-addition">+            chunkFilename:&apos;css/[id].css&apos;</span>
        }),
</code></pre>
<h3 id="t318.3 &#x5728;HTML&#x4E2D;&#x4F7F;&#x7528;&#x56FE;&#x7247;">8.3 &#x5728;HTML&#x4E2D;&#x4F7F;&#x7528;&#x56FE;&#x7247; <a href="#t318.3 &#x5728;HTML&#x4E2D;&#x4F7F;&#x7528;&#x56FE;&#x7247;"> # </a></h3>
<pre><code class="lang-js">npm i html-withimg-loader -D
</code></pre>
<p>index.html</p>
<pre><code class="lang-js">&lt;img src=<span class="hljs-string">&quot;./images/logo.png&quot;</span>/&gt;
</code></pre>
<p>webpack.config.js</p>
<pre><code class="lang-diff">{
<span class="hljs-addition">+                test: /\.(html|htm)$/,</span>
<span class="hljs-addition">+                use: &apos;html-withimg-loader&apos;</span>
}
</code></pre>
<h2 id="t329. &#x7F16;&#x8BD1;less &#x548C; sass">9. &#x7F16;&#x8BD1;less &#x548C; sass <a href="#t329. &#x7F16;&#x8BD1;less &#x548C; sass"> # </a></h2>
<h3 id="t339.1 &#x5B89;&#x88C5;less">9.1 &#x5B89;&#x88C5;less <a href="#t339.1 &#x5B89;&#x88C5;less"> # </a></h3>
<pre><code class="lang-js">npm i less less-loader -D
npm i node-sass sass-loader -D
</code></pre>
<h3 id="t349.2 &#x7F16;&#x5199;&#x6837;&#x5F0F;">9.2 &#x7F16;&#x5199;&#x6837;&#x5F0F; <a href="#t349.2 &#x7F16;&#x5199;&#x6837;&#x5F0F;"> # </a></h3>
<p>less</p>
<pre><code class="lang-css">@color:orange;
.less-container{
    color:@color;
}
</code></pre>
<p>sass</p>
<pre><code>$color:green;
.sass-container{
    color:green;
}
</code></pre><p>webpack.config.js</p>
<pre><code class="lang-js">   {
        <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.less/</span>,
        <span class="hljs-attr">include</span>: path.resolve(__dirname,<span class="hljs-string">&apos;src&apos;</span>),
        <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/node_modules/</span>,
        <span class="hljs-attr">use</span>: [{
            <span class="hljs-attr">loader</span>: MiniCssExtractPlugin.loader,
        },<span class="hljs-string">&apos;css-loader&apos;</span>,<span class="hljs-string">&apos;less-loader&apos;</span>]
    },
    {
        <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.scss/</span>,
        <span class="hljs-attr">include</span>: path.resolve(__dirname,<span class="hljs-string">&apos;src&apos;</span>),
        <span class="hljs-attr">exclude</span>: <span class="hljs-regexp">/node_modules/</span>,
        <span class="hljs-attr">use</span>: [{
            <span class="hljs-attr">loader</span>: MiniCssExtractPlugin.loader,
        },<span class="hljs-string">&apos;css-loader&apos;</span>,<span class="hljs-string">&apos;sass-loader&apos;</span>]
    },
</code></pre>
<h2 id="t3510. &#x5904;&#x7406;CSS3&#x5C5E;&#x6027;&#x524D;&#x7F00;">10. &#x5904;&#x7406;CSS3&#x5C5E;&#x6027;&#x524D;&#x7F00; <a href="#t3510. &#x5904;&#x7406;CSS3&#x5C5E;&#x6027;&#x524D;&#x7F00;"> # </a></h2>
<p>&#x4E3A;&#x4E86;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x517C;&#x5BB9;&#x6027;&#xFF0C;&#x6709;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x5FC5;&#x987B;&#x52A0;&#x5165;-webkit,-ms,-o,-moz&#x8FD9;&#x4E9B;&#x524D;&#x7F00;</p>
<ul>
<li>Trident&#x5185;&#x6838;&#xFF1A;&#x4E3B;&#x8981;&#x4EE3;&#x8868;&#x4E3A;IE&#x6D4F;&#x89C8;&#x5668;, &#x524D;&#x7F00;&#x4E3A;-ms</li>
<li>Gecko&#x5185;&#x6838;&#xFF1A;&#x4E3B;&#x8981;&#x4EE3;&#x8868;&#x4E3A;Firefox, &#x524D;&#x7F00;&#x4E3A;-moz</li>
<li>Presto&#x5185;&#x6838;&#xFF1A;&#x4E3B;&#x8981;&#x4EE3;&#x8868;&#x4E3A;Opera, &#x524D;&#x7F00;&#x4E3A;-o</li>
<li>Webkit&#x5185;&#x6838;&#xFF1A;&#x4EA7;&#x8981;&#x4EE3;&#x8868;&#x4E3A;Chrome&#x548C;Safari, &#x524D;&#x7F00;&#x4E3A;-webkit<pre><code class="lang-js">npm i postcss-loader autoprefixer -D
</code></pre>
<a href="https://github.com/postcss/postcss-loader">postcss-loader</a></li>
</ul>
<p>index.css</p>
<pre><code class="lang-css"><span class="hljs-selector-pseudo">::placeholder</span> {
    <span class="hljs-attribute">color</span>: red;
}
</code></pre>
<p>postcss.config.js</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports={
    <span class="hljs-attr">plugins</span>:[<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;autoprefixer&apos;</span>)]
}
</code></pre>
<p>webpack.config.js</p>
<pre><code class="lang-js">{
   <span class="hljs-attr">test</span>:<span class="hljs-regexp">/\.css$/</span>,
   <span class="hljs-attr">use</span>:[MiniCssExtractPlugin.loader,<span class="hljs-string">&apos;css-loader&apos;</span>,<span class="hljs-string">&apos;postcss-loader&apos;</span>],
   <span class="hljs-attr">include</span>:path.join(__dirname,<span class="hljs-string">&apos;./src&apos;</span>),
   <span class="hljs-attr">exclude</span>:<span class="hljs-regexp">/node_modules/</span>
}
</code></pre>
<h2 id="t3611. &#x8F6C;&#x4E49;ES6/ES7/JSX">11. &#x8F6C;&#x4E49;ES6/ES7/JSX <a href="#t3611. &#x8F6C;&#x4E49;ES6/ES7/JSX"> # </a></h2>
<ul>
<li>Babel&#x5176;&#x5B9E;&#x662F;&#x4E00;&#x4E2A;&#x7F16;&#x8BD1;JavaScript&#x7684;&#x5E73;&#x53F0;,&#x53EF;&#x4EE5;&#x628A;ES6/ES7,React&#x7684;JSX&#x8F6C;&#x4E49;&#x4E3A;ES5</li>
<li><a href="https://babeljs.io/docs/en/babel-plugin-proposal-decorators">babel-plugin-proposal-decorators</a></li>
</ul>
<h3 id="t3711.1  &#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x5305;">11.1  &#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x5305; <a href="#t3711.1  &#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x5305;"> # </a></h3>
<pre><code class="lang-js">npm i babel-loader @babel/core @babel/preset-env  @babel/preset-react  -D
npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-<span class="hljs-class"><span class="hljs-keyword">class</span>-<span class="hljs-title">properties</span> -<span class="hljs-title">D</span>
</span></code></pre>
<h3 id="t3811.2 decorator">11.2 decorator <a href="#t3811.2 decorator"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-comment">//Option+Shift+A</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">readonly</span>(<span class="hljs-params">target,key,discriptor</span>) </span>{
    discriptor.writable=<span class="hljs-literal">false</span>;
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span></span>{
    @readonly PI=<span class="hljs-number">3.14</span>;
}
<span class="hljs-keyword">let</span> p1=<span class="hljs-keyword">new</span> Person();
p1.PI=<span class="hljs-number">3.15</span>;
<span class="hljs-built_in">console</span>.log(p1)
</code></pre>
<p>jsconfig.json</p>
<pre><code class="lang-json">{
    <span class="hljs-attr">&quot;compilerOptions&quot;</span>: {
        <span class="hljs-attr">&quot;experimentalDecorators&quot;</span>: <span class="hljs-literal">true</span>
    }
}
</code></pre>
<h3 id="t3911.3 webpack.config.js">11.3 webpack.config.js <a href="#t3911.3 webpack.config.js"> # </a></h3>
<pre><code class="lang-js">{
    <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.jsx?$/</span>,
    <span class="hljs-attr">use</span>: {
        <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;babel-loader&apos;</span>,
        <span class="hljs-attr">options</span>:{
         <span class="hljs-string">&quot;plugins&quot;</span>: [
            [<span class="hljs-string">&quot;@babel/plugin-proposal-decorators&quot;</span>, { <span class="hljs-string">&quot;legacy&quot;</span>: <span class="hljs-literal">true</span> }],
            [<span class="hljs-string">&quot;@babel/plugin-proposal-class-properties&quot;</span>, { <span class="hljs-string">&quot;loose&quot;</span> : <span class="hljs-literal">true</span> }]
         ]
        }
    },
    <span class="hljs-attr">include</span>: path.join(__dirname,<span class="hljs-string">&apos;src&apos;</span>),
    <span class="hljs-attr">exclude</span>:<span class="hljs-regexp">/node_modules/</span>
}
</code></pre>
<h3 id="t4011.4 babel runtime">11.4 babel runtime <a href="#t4011.4 babel runtime"> # </a></h3>
<ul>
<li>babel &#x5728;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x90FD;&#x63D2;&#x5165;&#x4E86;&#x8F85;&#x52A9;&#x4EE3;&#x7801;&#xFF0C;&#x4F7F;&#x4EE3;&#x7801;&#x4F53;&#x79EF;&#x8FC7;&#x5927;</li>
<li>babel &#x5BF9;&#x4E00;&#x4E9B;&#x516C;&#x5171;&#x65B9;&#x6CD5;&#x4F7F;&#x7528;&#x4E86;&#x975E;&#x5E38;&#x5C0F;&#x7684;&#x8F85;&#x52A9;&#x4EE3;&#x7801;&#xFF0C;&#x6BD4;&#x5982; <code>_extend</code></li>
<li>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#x4F1A;&#x88AB;&#x6DFB;&#x52A0;&#x5230;&#x6BCF;&#x4E00;&#x4E2A;&#x9700;&#x8981;&#x5B83;&#x7684;&#x6587;&#x4EF6;&#x4E2D;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x5F15;&#x5165; <code>@babel/runtime</code> &#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x72EC;&#x7ACB;&#x6A21;&#x5757;&#xFF0C;&#x6765;&#x907F;&#x514D;&#x91CD;&#x590D;&#x5F15;&#x5165;</li>
<li><a href="https://babeljs.io/docs/en/babel-plugin-transform-runtime">babel-plugin-transform-runtime</a></li>
</ul>
<pre><code class="lang-js">npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
</code></pre>
<p>.babelrc</p>
<pre><code class="lang-js">{
  <span class="hljs-string">&quot;presets&quot;</span>: [<span class="hljs-string">&quot;@babel/preset-env&quot;</span>],
  <span class="hljs-string">&quot;plugins&quot;</span>: [
   [
         <span class="hljs-string">&quot;@babel/plugin-transform-runtime&quot;</span>,
         {
            <span class="hljs-string">&quot;corejs&quot;</span>: <span class="hljs-literal">false</span>,
            <span class="hljs-string">&quot;helpers&quot;</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-string">&quot;regenerator&quot;</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-string">&quot;useESModules&quot;</span>: <span class="hljs-literal">true</span>
        }
    ]
  ]
}
</code></pre>
<blockquote>
<p>webpack&#x6253;&#x5305;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x81EA;&#x52A8;&#x4F18;&#x5316;&#x91CD;&#x590D;&#x5F15;&#x5165;&#x516C;&#x5171;&#x65B9;&#x6CD5;&#x7684;&#x95EE;&#x9898;</p>
</blockquote>
<h3 id="t4111.5 ESLint&#x6821;&#x9A8C;&#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x89C4;&#x8303;">11.5 ESLint&#x6821;&#x9A8C;&#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x89C4;&#x8303; <a href="#t4111.5 ESLint&#x6821;&#x9A8C;&#x4EE3;&#x7801;&#x683C;&#x5F0F;&#x89C4;&#x8303;"> # </a></h3>
<ul>
<li><a href="https://eslint.org/docs/developer-guide/nodejs-api#cliengine">eslint</a></li>
<li><a href="https://www.npmjs.com/package/eslint-loader">eslint-loader</a></li>
<li><a href="https://eslint.org/docs/user-guide/configuring">configuring</a></li>
<li><a href="https://www.npmjs.com/package/babel-eslint">babel-eslint</a></li>
<li><a href="https://cloud.tencent.com/developer/chapter/12618">Rules</a></li>
<li><a href="https://segmentfault.com/a/1190000008742240">ESlint &#x8BED;&#x6CD5;&#x68C0;&#x6D4B;&#x914D;&#x7F6E;&#x8BF4;&#x660E;</a><pre><code class="lang-js">npm install eslint eslint-loader babel-eslint --D
</code></pre>
</li>
</ul>
<p>.eslintrc.js</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = {
    <span class="hljs-attr">root</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-comment">//&#x6307;&#x5B9A;&#x89E3;&#x6790;&#x5668;&#x9009;&#x9879;</span>
    parserOptions: {
        <span class="hljs-attr">sourceType</span>: <span class="hljs-string">&apos;module&apos;</span>
    },
    <span class="hljs-comment">//&#x6307;&#x5B9A;&#x811A;&#x672C;&#x7684;&#x8FD0;&#x884C;&#x73AF;&#x5883;</span>
    env: {
        <span class="hljs-attr">browser</span>: <span class="hljs-literal">true</span>,
    },
    <span class="hljs-comment">// &#x542F;&#x7528;&#x7684;&#x89C4;&#x5219;&#x53CA;&#x5176;&#x5404;&#x81EA;&#x7684;&#x9519;&#x8BEF;&#x7EA7;&#x522B;</span>
    rules: {
        <span class="hljs-string">&quot;indent&quot;</span>: [<span class="hljs-string">&quot;error&quot;</span>, <span class="hljs-number">4</span>],<span class="hljs-comment">//&#x7F29;&#x8FDB;&#x98CE;&#x683C;</span>
        <span class="hljs-string">&quot;quotes&quot;</span>: [<span class="hljs-string">&quot;error&quot;</span>, <span class="hljs-string">&quot;double&quot;</span>],<span class="hljs-comment">//&#x5F15;&#x53F7;&#x7C7B;&#x578B; </span>
        <span class="hljs-string">&quot;semi&quot;</span>: [<span class="hljs-string">&quot;error&quot;</span>, <span class="hljs-string">&quot;always&quot;</span>],<span class="hljs-comment">//&#x5173;&#x95ED;&#x8BED;&#x53E5;&#x5F3A;&#x5236;&#x5206;&#x53F7;&#x7ED3;&#x5C3E;</span>
        <span class="hljs-string">&quot;no-console&quot;</span>: <span class="hljs-string">&quot;error&quot;</span>,<span class="hljs-comment">//&#x7981;&#x6B62;&#x4F7F;&#x7528;console</span>
        <span class="hljs-string">&quot;arrow-parens&quot;</span>: <span class="hljs-number">0</span> <span class="hljs-comment">//&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7528;&#x5C0F;&#x62EC;&#x53F7;&#x62EC;&#x8D77;&#x6765;</span>
    }
}
</code></pre>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>: {
        <span class="hljs-comment">//&#x914D;&#x7F6E;&#x52A0;&#x8F7D;&#x89C4;&#x5219;</span>
        rules: [
            {
                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,
                <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;eslint-loader&apos;</span>,
                <span class="hljs-attr">enforce</span>: <span class="hljs-string">&quot;pre&quot;</span>,
                <span class="hljs-attr">include</span>: [path.resolve(__dirname, <span class="hljs-string">&apos;src&apos;</span>)], <span class="hljs-comment">// &#x6307;&#x5B9A;&#x68C0;&#x67E5;&#x7684;&#x76EE;&#x5F55;</span>
                options: { <span class="hljs-attr">fix</span>: <span class="hljs-literal">true</span> } <span class="hljs-comment">// &#x8FD9;&#x91CC;&#x7684;&#x914D;&#x7F6E;&#x9879;&#x53C2;&#x6570;&#x5C06;&#x4F1A;&#x88AB;&#x4F20;&#x9012;&#x5230; eslint &#x7684; CLIEngine   </span>
            },
</code></pre>
<h2 id="t4212. &#x5982;&#x4F55;&#x8C03;&#x8BD5;&#x6253;&#x5305;&#x540E;&#x7684;&#x4EE3;&#x7801;">12. &#x5982;&#x4F55;&#x8C03;&#x8BD5;&#x6253;&#x5305;&#x540E;&#x7684;&#x4EE3;&#x7801; <a href="#t4212. &#x5982;&#x4F55;&#x8C03;&#x8BD5;&#x6253;&#x5305;&#x540E;&#x7684;&#x4EE3;&#x7801;"> # </a></h2>
<p>webpack&#x901A;&#x8FC7;&#x914D;&#x7F6E;&#x53EF;&#x4EE5;&#x81EA;&#x52A8;&#x7ED9;&#x6211;&#x4EEC;<code>source maps</code>&#x6587;&#x4EF6;&#xFF0C;<code>map</code>&#x6587;&#x4EF6;&#x662F;&#x4E00;&#x79CD;&#x5BF9;&#x5E94;&#x7F16;&#x8BD1;&#x6587;&#x4EF6;&#x548C;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x65B9;&#x6CD5;</p>
<ul>
<li>source-map &#x628A;&#x6620;&#x5C04;&#x6587;&#x4EF6;&#x751F;&#x6210;&#x5230;&#x5355;&#x72EC;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x6700;&#x5B8C;&#x6574;&#x6700;&#x6162;</li>
<li>cheap-module-source-map &#x5728;&#x4E00;&#x4E2A;&#x5355;&#x72EC;&#x7684;&#x6587;&#x4EF6;&#x4E2D;&#x4EA7;&#x751F;&#x4E00;&#x4E2A;&#x4E0D;&#x5E26;&#x5217;&#x6620;&#x5C04;&#x7684;Map</li>
<li>eval-source-map &#x4F7F;&#x7528;eval&#x6253;&#x5305;&#x6E90;&#x6587;&#x4EF6;&#x6A21;&#x5757;,&#x5728;&#x540C;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x4E2D;&#x751F;&#x6210;&#x5B8C;&#x6574;sourcemap</li>
<li>cheap-module-eval-source-map sourcemap&#x548C;&#x6253;&#x5305;&#x540E;&#x7684;JS&#x540C;&#x884C;&#x663E;&#x793A;&#xFF0C;&#x6CA1;&#x6709;&#x6620;&#x5C04;&#x5217;</li>
</ul>
<pre><code class="lang-js">devtool:<span class="hljs-string">&apos;eval-source-map&apos;</span>
</code></pre>
<h2 id="t4313.&#x6253;&#x5305;&#x7B2C;&#x4E09;&#x65B9;&#x7C7B;&#x5E93;">13.&#x6253;&#x5305;&#x7B2C;&#x4E09;&#x65B9;&#x7C7B;&#x5E93; <a href="#t4313.&#x6253;&#x5305;&#x7B2C;&#x4E09;&#x65B9;&#x7C7B;&#x5E93;"> # </a></h2>
<h3 id="t4413.1 &#x76F4;&#x63A5;&#x5F15;&#x5165;">13.1 &#x76F4;&#x63A5;&#x5F15;&#x5165; <a href="#t4413.1 &#x76F4;&#x63A5;&#x5F15;&#x5165;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> _ <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;lodash&apos;</span>;
alert(_.join([<span class="hljs-string">&apos;a&apos;</span>,<span class="hljs-string">&apos;b&apos;</span>,<span class="hljs-string">&apos;c&apos;</span>],<span class="hljs-string">&apos;@&apos;</span>));
</code></pre>
<h3 id="t4513.2 &#x63D2;&#x4EF6;&#x5F15;&#x5165;">13.2 &#x63D2;&#x4EF6;&#x5F15;&#x5165; <a href="#t4513.2 &#x63D2;&#x4EF6;&#x5F15;&#x5165;"> # </a></h3>
<ul>
<li>_ &#x51FD;&#x6570;&#x4F1A;&#x81EA;&#x52A8;&#x6DFB;&#x52A0;&#x5230;&#x5F53;&#x524D;&#x6A21;&#x5757;&#x7684;&#x4E0A;&#x4E0B;&#x6587;&#xFF0C;&#x65E0;&#x9700;&#x663E;&#x793A;&#x58F0;&#x660E;</li>
</ul>
<pre><code class="lang-js"> + <span class="hljs-keyword">new</span> webpack.ProvidePlugin({
 +     _:<span class="hljs-string">&apos;lodash&apos;</span>
 + })
</code></pre>
<blockquote>
<p>&#x6CA1;&#x6709;&#x5168;&#x5C40;&#x7684;<code>$</code>&#x51FD;&#x6570;&#xFF0C;&#x6240;&#x4EE5;&#x5BFC;&#x5165;&#x4F9D;&#x8D56;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x7684;&#x63D2;&#x4EF6;&#x4F9D;&#x65E7;&#x4F1A;&#x5931;&#x8D25;</p>
</blockquote>
<h3 id="t4613.3 expose-loader">13.3 expose-loader <a href="#t4613.3 expose-loader"> # </a></h3>
<p>&#x4E0D;&#x9700;&#x8981;&#x4EFB;&#x4F55;&#x5176;&#x4ED6;&#x7684;&#x63D2;&#x4EF6;&#x914D;&#x5408;&#xFF0C;&#x53EA;&#x8981;&#x5C06;&#x4E0B;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x6DFB;&#x52A0;&#x5230;&#x6240;&#x6709;&#x7684;loader&#x4E4B;&#x524D;</p>
<pre><code class="lang-js"><span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;expose-loader?libraryName!./file.js&quot;</span>);
</code></pre>
<pre><code class="lang-js">{ 
    <span class="hljs-attr">test</span>: <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">&quot;jquery&quot;</span>), 
    <span class="hljs-attr">loader</span>: <span class="hljs-string">&quot;expose-loader?jQuery&quot;</span>
}
</code></pre>
<pre><code class="lang-js"><span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;expose-loader?$!jquery&quot;</span>);
</code></pre>
<h3 id="t4713.4 externals">13.4 externals <a href="#t4713.4 externals"> # </a></h3>
<p>&#x5982;&#x679C;&#x6211;&#x4EEC;&#x60F3;&#x5F15;&#x7528;&#x4E00;&#x4E2A;&#x5E93;&#xFF0C;&#x4F46;&#x662F;&#x53C8;&#x4E0D;&#x60F3;&#x8BA9;webpack&#x6253;&#x5305;&#xFF0C;&#x5E76;&#x4E14;&#x53C8;&#x4E0D;&#x5F71;&#x54CD;&#x6211;&#x4EEC;&#x5728;&#x7A0B;&#x5E8F;&#x4E2D;&#x4EE5;CMD&#x3001;AMD&#x6216;&#x8005;window/global&#x5168;&#x5C40;&#x7B49;&#x65B9;&#x5F0F;&#x8FDB;&#x884C;&#x4F7F;&#x7528;&#xFF0C;&#x90A3;&#x5C31;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x914D;&#x7F6E;externals</p>
<pre><code class="lang-js"> <span class="hljs-keyword">const</span> jQuery = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;jquery&quot;</span>);
 <span class="hljs-keyword">import</span> jQuery <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;jquery&apos;</span>;
</code></pre>
<pre><code class="lang-js">+ externals: {
+         jquery: <span class="hljs-string">&apos;jQuery&apos;</span><span class="hljs-comment">//&#x5982;&#x679C;&#x8981;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x8FD0;&#x884C;&#xFF0C;&#x90A3;&#x4E48;&#x4E0D;&#x7528;&#x6DFB;&#x52A0;&#x4EC0;&#x4E48;&#x524D;&#x7F00;&#xFF0C;&#x9ED8;&#x8BA4;&#x8BBE;&#x7F6E;&#x5C31;&#x662F;global</span>
+ },
<span class="hljs-attr">module</span>: {
</code></pre>
<h2 id="t4814. watch">14. watch <a href="#t4814. watch"> # </a></h2>
<p>&#x5F53;&#x4EE3;&#x7801;&#x53D1;&#x751F;&#x4FEE;&#x6539;&#x540E;&#x53EF;&#x4EE5;&#x81EA;&#x52A8;&#x91CD;&#x65B0;&#x7F16;&#x8BD1;</p>
<pre><code class="lang-js">watch: <span class="hljs-literal">true</span>,
<span class="hljs-attr">watchOptions</span>: {
    <span class="hljs-attr">ignored</span>: <span class="hljs-regexp">/node_modules/</span>, <span class="hljs-comment">//&#x5FFD;&#x7565;&#x4E0D;&#x7528;&#x76D1;&#x542C;&#x53D8;&#x66F4;&#x7684;&#x76EE;&#x5F55;</span>
    poll:<span class="hljs-number">1000</span>, <span class="hljs-comment">//&#x6BCF;&#x79D2;&#x8BE2;&#x95EE;&#x7684;&#x6587;&#x4EF6;&#x53D8;&#x66F4;&#x7684;&#x6B21;&#x6570;</span>
    aggregateTimeout: <span class="hljs-number">500</span>, <span class="hljs-comment">//&#x9632;&#x6B62;&#x91CD;&#x590D;&#x4FDD;&#x5B58;&#x9891;&#x7E41;&#x91CD;&#x65B0;&#x7F16;&#x8BD1;,500&#x6BEB;&#x79D2;&#x5185;&#x91CD;&#x590D;&#x4FDD;&#x5B58;&#x4E0D;&#x6253;&#x5305;</span>
}
</code></pre>
<ul>
<li>webpack&#x5B9A;&#x65F6;&#x83B7;&#x53D6;&#x6587;&#x4EF6;&#x7684;&#x66F4;&#x65B0;&#x65F6;&#x95F4;&#xFF0C;&#x5E76;&#x8DDF;&#x4E0A;&#x6B21;&#x4FDD;&#x5B58;&#x7684;&#x65F6;&#x95F4;&#x8FDB;&#x884C;&#x6BD4;&#x5BF9;&#xFF0C;&#x4E0D;&#x4E00;&#x81F4;&#x5C31;&#x8868;&#x793A;&#x53D1;&#x751F;&#x4E86;&#x53D8;&#x5316;,poll&#x5C31;&#x7528;&#x6765;&#x914D;&#x7F6E;&#x6BCF;&#x79D2;&#x95EE;&#x591A;&#x5C11;&#x6B21;</li>
<li>&#x5F53;&#x68C0;&#x6D4B;&#x6587;&#x4EF6;&#x4E0D;&#x518D;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x4F1A;&#x5148;&#x7F13;&#x5B58;&#x8D77;&#x6765;&#xFF0C;&#x7B49;&#x5F85;&#x4E00;&#x6BB5;&#x65F6;&#x95F4;&#x540E;&#x4E4B;&#x540E;&#x518D;&#x901A;&#x77E5;&#x76D1;&#x542C;&#x8005;&#xFF0C;&#x8FD9;&#x4E2A;&#x7B49;&#x5F85;&#x65F6;&#x95F4;&#x901A;&#x8FC7;<code>aggregateTimeout</code>&#x914D;&#x7F6E;</li>
<li>webpack&#x53EA;&#x4F1A;&#x76D1;&#x542C;entry&#x4F9D;&#x8D56;&#x7684;&#x6587;&#x4EF6;</li>
<li>&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5C3D;&#x53EF;&#x80FD;&#x51CF;&#x5C11;&#x9700;&#x8981;&#x76D1;&#x542C;&#x7684;&#x6587;&#x4EF6;&#x6570;&#x91CF;&#x548C;&#x68C0;&#x67E5;&#x9891;&#x7387;&#xFF0C;&#x5F53;&#x7136;&#x9891;&#x7387;&#x7684;&#x964D;&#x4F4E;&#x4F1A;&#x5BFC;&#x81F4;&#x7075;&#x654F;&#x5EA6;&#x4E0B;&#x964D;</li>
</ul>
<h2 id="t4915. &#x6DFB;&#x52A0;&#x5546;&#x6807;">15. &#x6DFB;&#x52A0;&#x5546;&#x6807; <a href="#t4915. &#x6DFB;&#x52A0;&#x5546;&#x6807;"> # </a></h2>
<pre><code class="lang-js">+ <span class="hljs-keyword">new</span> webpack.BannerPlugin(<span class="hljs-string">&apos;&#x73E0;&#x5CF0;&#x57F9;&#x8BAD;&apos;</span>),
</code></pre>
<h2 id="t5016. &#x62F7;&#x8D1D;&#x9759;&#x6001;&#x6587;&#x4EF6;">16. &#x62F7;&#x8D1D;&#x9759;&#x6001;&#x6587;&#x4EF6; <a href="#t5016. &#x62F7;&#x8D1D;&#x9759;&#x6001;&#x6587;&#x4EF6;"> # </a></h2>
<p>&#x6709;&#x65F6;&#x9879;&#x76EE;&#x4E2D;&#x6CA1;&#x6709;&#x5F15;&#x7528;&#x7684;&#x6587;&#x4EF6;&#x4E5F;&#x9700;&#x8981;&#x6253;&#x5305;&#x5230;&#x76EE;&#x6807;&#x76EE;&#x5F55;</p>
<pre><code>npm i copy-webpack-plugin -D
</code></pre><pre><code class="lang-js"><span class="hljs-keyword">new</span> CopyWebpackPlugin([{
  <span class="hljs-attr">from</span>: path.resolve(__dirname,<span class="hljs-string">&apos;src/assets&apos;</span>),<span class="hljs-comment">//&#x9759;&#x6001;&#x8D44;&#x6E90;&#x76EE;&#x5F55;&#x6E90;&#x5730;&#x5740;</span>
  to:path.resolve(__dirname,<span class="hljs-string">&apos;dist/assets&apos;</span>) <span class="hljs-comment">//&#x76EE;&#x6807;&#x5730;&#x5740;&#xFF0C;&#x76F8;&#x5BF9;&#x4E8E;output&#x7684;path&#x76EE;&#x5F55;</span>
}])
</code></pre>
<h2 id="t5117. &#x6253;&#x5305;&#x524D;&#x5148;&#x6E05;&#x7A7A;&#x8F93;&#x51FA;&#x76EE;&#x5F55;">17. &#x6253;&#x5305;&#x524D;&#x5148;&#x6E05;&#x7A7A;&#x8F93;&#x51FA;&#x76EE;&#x5F55; <a href="#t5117. &#x6253;&#x5305;&#x524D;&#x5148;&#x6E05;&#x7A7A;&#x8F93;&#x51FA;&#x76EE;&#x5F55;"> # </a></h2>
<pre><code class="lang-js">npm i  clean-webpack-plugin -D
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">new</span> CleanWebpackPlugin([path.resolve(__dirname,<span class="hljs-string">&apos;dist&apos;</span>)])
</code></pre>
<h2 id="t5218. &#x670D;&#x52A1;&#x5668;&#x4EE3;&#x7406;">18. &#x670D;&#x52A1;&#x5668;&#x4EE3;&#x7406; <a href="#t5218. &#x670D;&#x52A1;&#x5668;&#x4EE3;&#x7406;"> # </a></h2>
<p>&#x5982;&#x679C;&#x4F60;&#x6709;&#x5355;&#x72EC;&#x7684;&#x540E;&#x7AEF;&#x5F00;&#x53D1;&#x670D;&#x52A1;&#x5668; API&#xFF0C;&#x5E76;&#x4E14;&#x5E0C;&#x671B;&#x5728;&#x540C;&#x57DF;&#x540D;&#x4E0B;&#x53D1;&#x9001; API &#x8BF7;&#x6C42; &#xFF0C;&#x90A3;&#x4E48;&#x4EE3;&#x7406;&#x67D0;&#x4E9B; URL &#x4F1A;&#x5F88;&#x6709;&#x7528;&#x3002;</p>
<h3 id="t5318.1 &#x4E0D;&#x4FEE;&#x6539;&#x8DEF;&#x5F84;">18.1 &#x4E0D;&#x4FEE;&#x6539;&#x8DEF;&#x5F84; <a href="#t5318.1 &#x4E0D;&#x4FEE;&#x6539;&#x8DEF;&#x5F84;"> # </a></h3>
<p>//&#x8BF7;&#x6C42;&#x5230; /api/users &#x73B0;&#x5728;&#x4F1A;&#x88AB;&#x4EE3;&#x7406;&#x5230;&#x8BF7;&#x6C42; <a href="http://localhost:3000/api/users&#x3002;">http://localhost:3000/api/users&#x3002;</a></p>
<pre><code class="lang-js">proxy: {
  <span class="hljs-string">&quot;/api&quot;</span>: <span class="hljs-string">&apos;http://localhost:3000&apos;</span>
}
</code></pre>
<h3 id="t5418.2 &#x4FEE;&#x6539;&#x8DEF;&#x5F84;">18.2 &#x4FEE;&#x6539;&#x8DEF;&#x5F84; <a href="#t5418.2 &#x4FEE;&#x6539;&#x8DEF;&#x5F84;"> # </a></h3>
<pre><code class="lang-js">proxy: {
    <span class="hljs-string">&quot;/api&quot;</span>: {
       <span class="hljs-attr">target</span>: <span class="hljs-string">&apos;http://localhost:3000&apos;</span>,
       <span class="hljs-attr">pathRewrite</span>:{<span class="hljs-string">&quot;^/api&quot;</span>:<span class="hljs-string">&quot;&quot;</span>}        
    }            
}
</code></pre>
<h3 id="t5518.3 before after">18.3 before after <a href="#t5518.3 before after"> # </a></h3>
<p>before &#x5728; webpack-dev-server &#x9759;&#x6001;&#x8D44;&#x6E90;&#x4E2D;&#x95F4;&#x4EF6;&#x5904;&#x7406;&#x4E4B;&#x524D;&#xFF0C;&#x53EF;&#x4EE5;&#x7528;&#x4E8E;&#x62E6;&#x622A;&#x90E8;&#x5206;&#x8BF7;&#x6C42;&#x8FD4;&#x56DE;&#x7279;&#x5B9A;&#x5185;&#x5BB9;&#xFF0C;&#x6216;&#x8005;&#x5B9E;&#x73B0;&#x7B80;&#x5355;&#x7684;&#x6570;&#x636E; mock&#x3002;</p>
<pre><code class="lang-js">before(app){
  app.get(<span class="hljs-string">&apos;/api/users&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req, res</span>) </span>{ 
    res.json([{<span class="hljs-attr">id</span>:<span class="hljs-number">1</span>,<span class="hljs-attr">name</span>:<span class="hljs-string">&apos;zfpx1&apos;</span>}])
  })
}
</code></pre>
<h3 id="t5618.4 webpack-dev-middleware">18.4 webpack-dev-middleware <a href="#t5618.4 webpack-dev-middleware"> # </a></h3>
<p><a href="https://www.npmjs.com/package/">webpack-dev-middleware</a>&#x5C31;&#x662F;&#x5728; Express &#x4E2D;&#x63D0;&#x4F9B; webpack-dev-server &#x9759;&#x6001;&#x670D;&#x52A1;&#x80FD;&#x529B;&#x7684;&#x4E00;&#x4E2A;&#x4E2D;&#x95F4;&#x4EF6;</p>
<pre><code class="lang-js">npm install webpack-dev-middleware --save-dev
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">const</span> app = express();
<span class="hljs-keyword">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack&apos;</span>);
<span class="hljs-keyword">const</span> webpackDevMiddleware = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack-dev-middleware&apos;</span>);
<span class="hljs-keyword">const</span> webpackOptions = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./webpack.config&apos;</span>);
webpackOptions.mode = <span class="hljs-string">&apos;development&apos;</span>;
<span class="hljs-keyword">const</span> compiler = webpack(webpackOptions);
app.use(webpackDevMiddleware(compiler, {}));
app.listen(<span class="hljs-number">3000</span>);
</code></pre>
<ul>
<li>webpack-dev-server &#x7684;&#x597D;&#x5904;&#x662F;&#x76F8;&#x5BF9;&#x7B80;&#x5355;&#xFF0C;&#x76F4;&#x63A5;&#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x540E;&#x6267;&#x884C;&#x547D;&#x4EE4;&#x5373;&#x53EF;</li>
<li>&#x800C;&#x4F7F;&#x7528;<code>webpack-dev-middleware</code>&#x7684;&#x597D;&#x5904;&#x662F;&#x53EF;&#x4EE5;&#x5728;&#x65E2;&#x6709;&#x7684; Express &#x4EE3;&#x7801;&#x57FA;&#x7840;&#x4E0A;&#x5FEB;&#x901F;&#x6DFB;&#x52A0; webpack-dev-server &#x7684;&#x529F;&#x80FD;&#xFF0C;&#x540C;&#x65F6;&#x5229;&#x7528; Express &#x6765;&#x6839;&#x636E;&#x9700;&#x8981;&#x6DFB;&#x52A0;&#x66F4;&#x591A;&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x5982; mock &#x670D;&#x52A1;&#x3001;&#x4EE3;&#x7406; API &#x8BF7;&#x6C42;&#x7B49;</li>
</ul>
<h2 id="t5719. resolve&#x89E3;&#x6790;">19. resolve&#x89E3;&#x6790; <a href="#t5719. resolve&#x89E3;&#x6790;"> # </a></h2>
<h3 id="t5819.1 extensions">19.1 extensions <a href="#t5819.1 extensions"> # </a></h3>
<p>&#x6307;&#x5B9A;extension&#x4E4B;&#x540E;&#x53EF;&#x4EE5;&#x4E0D;&#x7528;&#x5728;<code>require</code>&#x6216;&#x662F;<code>import</code>&#x7684;&#x65F6;&#x5019;&#x52A0;&#x6587;&#x4EF6;&#x6269;&#x5C55;&#x540D;,&#x4F1A;&#x4F9D;&#x6B21;&#x5C1D;&#x8BD5;&#x6DFB;&#x52A0;&#x6269;&#x5C55;&#x540D;&#x8FDB;&#x884C;&#x5339;&#x914D;</p>
<pre><code class="lang-js">resolve: {
  <span class="hljs-attr">extensions</span>: [<span class="hljs-string">&quot;.js&quot;</span>,<span class="hljs-string">&quot;.jsx&quot;</span>,<span class="hljs-string">&quot;.json&quot;</span>,<span class="hljs-string">&quot;.css&quot;</span>]
},
</code></pre>
<h3 id="t5919.2 alias">19.2 alias <a href="#t5919.2 alias"> # </a></h3>
<p>&#x914D;&#x7F6E;&#x522B;&#x540D;&#x53EF;&#x4EE5;&#x52A0;&#x5FEB;webpack&#x67E5;&#x627E;&#x6A21;&#x5757;&#x7684;&#x901F;&#x5EA6;</p>
<ul>
<li>&#x6BCF;&#x5F53;&#x5F15;&#x5165;bootstrap&#x6A21;&#x5757;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5B83;&#x4F1A;&#x76F4;&#x63A5;&#x5F15;&#x5165;<code>bootstrap</code>,&#x800C;&#x4E0D;&#x9700;&#x8981;&#x4ECE;<code>node_modules</code>&#x6587;&#x4EF6;&#x5939;&#x4E2D;&#x6309;&#x6A21;&#x5757;&#x7684;&#x67E5;&#x627E;&#x89C4;&#x5219;&#x67E5;&#x627E;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> bootstrap = path.resolve(__dirname,<span class="hljs-string">&apos;node_modules/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d023f3232292e292f3c2d1d6e736e736a">[email&#160;protected]</a>@bootstrap/dist/css/bootstrap.css&apos;</span>);
resolve: {
+    alias:{
+        <span class="hljs-string">&quot;bootstrap&quot;</span>:bootstrap
+    }
},
</code></pre>
<h3 id="t6019.3 modules">19.3 modules <a href="#t6019.3 modules"> # </a></h3>
<ul>
<li>&#x5BF9;&#x4E8E;&#x76F4;&#x63A5;&#x58F0;&#x660E;&#x4F9D;&#x8D56;&#x540D;&#x7684;&#x6A21;&#x5757;&#xFF08;&#x5982; react &#xFF09;&#xFF0C;webpack &#x4F1A;&#x7C7B;&#x4F3C; Node.js &#x4E00;&#x6837;&#x8FDB;&#x884C;&#x8DEF;&#x5F84;&#x641C;&#x7D22;&#xFF0C;&#x641C;&#x7D22;<code>node_modules</code>&#x76EE;&#x5F55;</li>
<li>&#x8FD9;&#x4E2A;&#x76EE;&#x5F55;&#x5C31;&#x662F;&#x4F7F;&#x7528;<code>resolve.modules</code>&#x5B57;&#x6BB5;&#x8FDB;&#x884C;&#x914D;&#x7F6E;&#x7684;
&#x9ED8;&#x8BA4;&#x914D;&#x7F6E;<pre><code class="lang-js">resolve: {
<span class="hljs-attr">modules</span>: [<span class="hljs-string">&apos;node_modules&apos;</span>],
}
</code></pre>
&#x5982;&#x679C;&#x53EF;&#x4EE5;&#x786E;&#x5B9A;&#x9879;&#x76EE;&#x5185;&#x6240;&#x6709;&#x7684;&#x7B2C;&#x4E09;&#x65B9;&#x4F9D;&#x8D56;&#x6A21;&#x5757;&#x90FD;&#x662F;&#x5728;&#x9879;&#x76EE;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x7684; node_modules &#x4E2D;&#x7684;&#x8BDD;<pre><code class="lang-js">resolve: {
<span class="hljs-attr">modules</span>: [path.resolve(__dirname, <span class="hljs-string">&apos;node_modules&apos;</span>)],
}
</code></pre>
</li>
</ul>
<h3 id="t6119.4 mainFields">19.4 mainFields <a href="#t6119.4 mainFields"> # </a></h3>
<p>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;package.json &#x6587;&#x4EF6;&#x5219;&#x6309;&#x7167;&#x6587;&#x4EF6;&#x4E2D; main &#x5B57;&#x6BB5;&#x7684;&#x6587;&#x4EF6;&#x540D;&#x6765;&#x67E5;&#x627E;&#x6587;&#x4EF6;</p>
<pre><code class="lang-js">resolve: {
  <span class="hljs-comment">// &#x914D;&#x7F6E; target === &quot;web&quot; &#x6216;&#x8005; target === &quot;webworker&quot; &#x65F6; mainFields &#x9ED8;&#x8BA4;&#x503C;&#x662F;&#xFF1A;</span>
  mainFields: [<span class="hljs-string">&apos;browser&apos;</span>, <span class="hljs-string">&apos;module&apos;</span>, <span class="hljs-string">&apos;main&apos;</span>],
  <span class="hljs-comment">// target &#x7684;&#x503C;&#x4E3A;&#x5176;&#x4ED6;&#x65F6;&#xFF0C;mainFields &#x9ED8;&#x8BA4;&#x503C;&#x4E3A;&#xFF1A;</span>
  mainFields: [<span class="hljs-string">&quot;module&quot;</span>, <span class="hljs-string">&quot;main&quot;</span>],
}
</code></pre>
<h3 id="t6219.5 mainFiles">19.5 mainFiles <a href="#t6219.5 mainFiles"> # </a></h3>
<p>&#x5F53;&#x76EE;&#x5F55;&#x4E0B;&#x6CA1;&#x6709; package.json &#x6587;&#x4EF6;&#x65F6;&#xFF0C;&#x6211;&#x4EEC;&#x8BF4;&#x4F1A;&#x9ED8;&#x8BA4;&#x4F7F;&#x7528;&#x76EE;&#x5F55;&#x4E0B;&#x7684; index.js &#x8FD9;&#x4E2A;&#x6587;&#x4EF6;&#xFF0C;&#x5176;&#x5B9E;&#x8FD9;&#x4E2A;&#x4E5F;&#x662F;&#x53EF;&#x4EE5;&#x914D;&#x7F6E;&#x7684;</p>
<pre><code class="lang-js">resolve: {
  <span class="hljs-attr">mainFiles</span>: [<span class="hljs-string">&apos;index&apos;</span>], <span class="hljs-comment">// &#x4F60;&#x53EF;&#x4EE5;&#x6DFB;&#x52A0;&#x5176;&#x4ED6;&#x9ED8;&#x8BA4;&#x4F7F;&#x7528;&#x7684;&#x6587;&#x4EF6;&#x540D;</span>
},
</code></pre>
<h3 id="t6319.6 resolveLoader">19.6 resolveLoader <a href="#t6319.6 resolveLoader"> # </a></h3>
<p><code>resolve.resolveLoader</code>&#x7528;&#x4E8E;&#x914D;&#x7F6E;&#x89E3;&#x6790; loader &#x65F6;&#x7684; resolve &#x914D;&#x7F6E;,&#x9ED8;&#x8BA4;&#x7684;&#x914D;&#x7F6E;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = {
  <span class="hljs-attr">resolveLoader</span>: {
    <span class="hljs-attr">modules</span>: [ <span class="hljs-string">&apos;node_modules&apos;</span> ],
    <span class="hljs-attr">extensions</span>: [ <span class="hljs-string">&apos;.js&apos;</span>, <span class="hljs-string">&apos;.json&apos;</span> ],
    <span class="hljs-attr">mainFields</span>: [ <span class="hljs-string">&apos;loader&apos;</span>, <span class="hljs-string">&apos;main&apos;</span> ]
  }
};
</code></pre>
<h2 id="t6420. noParse">20. noParse <a href="#t6420. noParse"> # </a></h2>
<ul>
<li><code>module.noParse</code> &#x5B57;&#x6BB5;&#xFF0C;&#x53EF;&#x4EE5;&#x7528;&#x4E8E;&#x914D;&#x7F6E;&#x54EA;&#x4E9B;&#x6A21;&#x5757;&#x6587;&#x4EF6;&#x7684;&#x5185;&#x5BB9;&#x4E0D;&#x9700;&#x8981;&#x8FDB;&#x884C;&#x89E3;&#x6790;</li>
<li>&#x4E0D;&#x9700;&#x8981;&#x89E3;&#x6790;&#x4F9D;&#x8D56;&#xFF08;&#x5373;&#x65E0;&#x4F9D;&#x8D56;&#xFF09; &#x7684;&#x7B2C;&#x4E09;&#x65B9;&#x5927;&#x578B;&#x7C7B;&#x5E93;&#x7B49;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x8FD9;&#x4E2A;&#x5B57;&#x6BB5;&#x6765;&#x914D;&#x7F6E;&#xFF0C;&#x4EE5;&#x63D0;&#x9AD8;&#x6574;&#x4F53;&#x7684;&#x6784;&#x5EFA;&#x901F;&#x5EA6;<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = {
<span class="hljs-comment">// ...</span>
<span class="hljs-built_in">module</span>: {
  <span class="hljs-attr">noParse</span>: <span class="hljs-regexp">/jquery|lodash/</span>, <span class="hljs-comment">// &#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;</span>
  <span class="hljs-comment">// &#x6216;&#x8005;&#x4F7F;&#x7528;&#x51FD;&#x6570;</span>
  noParse(content) {
    <span class="hljs-keyword">return</span> <span class="hljs-regexp">/jquery|lodash/</span>.test(content)
  },
}
}...
</code></pre>
<blockquote>
<p>&#x4F7F;&#x7528; noParse &#x8FDB;&#x884C;&#x5FFD;&#x7565;&#x7684;&#x6A21;&#x5757;&#x6587;&#x4EF6;&#x4E2D;&#x4E0D;&#x80FD;&#x4F7F;&#x7528; import&#x3001;require&#x3001;define &#x7B49;&#x5BFC;&#x5165;&#x673A;&#x5236;</p>
</blockquote>
</li>
</ul>
<h2 id="t6521. DefinePlugin">21. DefinePlugin <a href="#t6521. DefinePlugin"> # </a></h2>
<p><code>DefinePlugin</code>&#x521B;&#x5EFA;&#x4E00;&#x4E9B;&#x5728;&#x7F16;&#x8BD1;&#x65F6;&#x53EF;&#x4EE5;&#x914D;&#x7F6E;&#x7684;&#x5168;&#x5C40;&#x5E38;&#x91CF;</p>
<pre><code class="lang-js"><span class="hljs-keyword">new</span> webpack.DefinePlugin({
    <span class="hljs-attr">PRODUCTION</span>: <span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-literal">true</span>),
    <span class="hljs-attr">VERSION</span>: <span class="hljs-string">&quot;1&quot;</span>,
    <span class="hljs-attr">EXPRESSION</span>: <span class="hljs-string">&quot;1+2&quot;</span>,
    <span class="hljs-attr">COPYRIGHT</span>: {
        <span class="hljs-attr">AUTHOR</span>: <span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-string">&quot;&#x73E0;&#x5CF0;&#x57F9;&#x8BAD;&quot;</span>)
    }
})
</code></pre>
<pre><code class="lang-js"><span class="hljs-built_in">console</span>.log(PRODUCTION);
<span class="hljs-built_in">console</span>.log(VERSION);
<span class="hljs-built_in">console</span>.log(EXPRESSION);
<span class="hljs-built_in">console</span>.log(COPYRIGHT);
</code></pre>
<ul>
<li>&#x5982;&#x679C;&#x914D;&#x7F6E;&#x7684;&#x503C;&#x662F;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x90A3;&#x4E48;&#x6574;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#x4F1A;&#x88AB;&#x5F53;&#x6210;&#x4EE3;&#x7801;&#x7247;&#x6BB5;&#x6765;&#x6267;&#x884C;&#xFF0C;&#x5176;&#x7ED3;&#x679C;&#x4F5C;&#x4E3A;&#x6700;&#x7EC8;&#x53D8;&#x91CF;&#x7684;&#x503C;</li>
<li>&#x5982;&#x679C;&#x914D;&#x7F6E;&#x7684;&#x503C;&#x4E0D;&#x662F;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x4E5F;&#x4E0D;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x5B57;&#x9762;&#x91CF;&#xFF0C;&#x90A3;&#x4E48;&#x8BE5;&#x503C;&#x4F1A;&#x88AB;&#x8F6C;&#x4E3A;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x5982; true&#xFF0C;&#x6700;&#x540E;&#x7684;&#x7ED3;&#x679C;&#x662F; &apos;true&apos;</li>
<li>&#x5982;&#x679C;&#x914D;&#x7F6E;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x5B57;&#x9762;&#x91CF;&#xFF0C;&#x90A3;&#x4E48;&#x8BE5;&#x5BF9;&#x8C61;&#x7684;&#x6240;&#x6709; key &#x4F1A;&#x4EE5;&#x540C;&#x6837;&#x7684;&#x65B9;&#x5F0F;&#x53BB;&#x5B9A;&#x4E49;</li>
<li>JSON.stringify(true) &#x7684;&#x7ED3;&#x679C;&#x662F; &apos;true&apos;</li>
</ul>
<h2 id="t6622. IgnorePlugin">22. IgnorePlugin <a href="#t6622. IgnorePlugin"> # </a></h2>
<p>IgnorePlugin&#x7528;&#x4E8E;&#x5FFD;&#x7565;&#x67D0;&#x4E9B;&#x7279;&#x5B9A;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x8BA9; webpack &#x4E0D;&#x628A;&#x8FD9;&#x4E9B;&#x6307;&#x5B9A;&#x7684;&#x6A21;&#x5757;&#x6253;&#x5305;&#x8FDB;&#x53BB;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> moment <span class="hljs-keyword">from</span>  <span class="hljs-string">&apos;moment&apos;</span>;
<span class="hljs-built_in">console</span>.log(moment);
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">new</span> webpack.IgnorePlugin(<span class="hljs-regexp">/^\.\/locale/</span>,/moment$/)
</code></pre>
<ul>
<li>&#x7B2C;&#x4E00;&#x4E2A;&#x662F;&#x5339;&#x914D;&#x5F15;&#x5165;&#x6A21;&#x5757;&#x8DEF;&#x5F84;&#x7684;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;</li>
<li>&#x7B2C;&#x4E8C;&#x4E2A;&#x662F;&#x5339;&#x914D;&#x6A21;&#x5757;&#x7684;&#x5BF9;&#x5E94;&#x4E0A;&#x4E0B;&#x6587;&#xFF0C;&#x5373;&#x6240;&#x5728;&#x76EE;&#x5F55;&#x540D;</li>
</ul>
<h2 id="t6720. &#x533A;&#x5206;&#x73AF;&#x5883;&#x53D8;&#x91CF;">20. &#x533A;&#x5206;&#x73AF;&#x5883;&#x53D8;&#x91CF; <a href="#t6720. &#x533A;&#x5206;&#x73AF;&#x5883;&#x53D8;&#x91CF;"> # </a></h2>
<ul>
<li>&#x65E5;&#x5E38;&#x7684;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x5DE5;&#x4F5C;&#x4E2D;&#xFF0C;&#x4E00;&#x822C;&#x90FD;&#x4F1A;&#x6709;&#x4E24;&#x5957;&#x6784;&#x5EFA;&#x73AF;&#x5883;</li>
<li>&#x4E00;&#x5957;&#x5F00;&#x53D1;&#x65F6;&#x4F7F;&#x7528;&#xFF0C;&#x6784;&#x5EFA;&#x7ED3;&#x679C;&#x7528;&#x4E8E;&#x672C;&#x5730;&#x5F00;&#x53D1;&#x8C03;&#x8BD5;&#xFF0C;&#x4E0D;&#x8FDB;&#x884C;&#x4EE3;&#x7801;&#x538B;&#x7F29;&#xFF0C;&#x6253;&#x5370; debug &#x4FE1;&#x606F;&#xFF0C;&#x5305;&#x542B; sourcemap &#x6587;&#x4EF6;</li>
<li>&#x4E00;&#x5957;&#x6784;&#x5EFA;&#x540E;&#x7684;&#x7ED3;&#x679C;&#x662F;&#x76F4;&#x63A5;&#x5E94;&#x7528;&#x4E8E;&#x7EBF;&#x4E0A;&#x7684;&#xFF0C;&#x5373;&#x4EE3;&#x7801;&#x90FD;&#x662F;&#x538B;&#x7F29;&#x540E;&#xFF0C;&#x8FD0;&#x884C;&#x65F6;&#x4E0D;&#x6253;&#x5370; debug &#x4FE1;&#x606F;&#xFF0C;&#x9759;&#x6001;&#x6587;&#x4EF6;&#x4E0D;&#x5305;&#x62EC; sourcemap</li>
<li>webpack 4.x &#x7248;&#x672C;&#x5F15;&#x5165;&#x4E86; <code>mode</code> &#x7684;&#x6982;&#x5FF5;</li>
<li>&#x5F53;&#x4F60;&#x6307;&#x5B9A;&#x4F7F;&#x7528; production mode &#x65F6;&#xFF0C;&#x9ED8;&#x8BA4;&#x4F1A;&#x542F;&#x7528;&#x5404;&#x79CD;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x5305;&#x62EC;&#x6784;&#x5EFA;&#x7ED3;&#x679C;&#x4F18;&#x5316;&#x4EE5;&#x53CA; webpack &#x8FD0;&#x884C;&#x6027;&#x80FD;&#x4F18;&#x5316;</li>
<li>&#x800C;&#x5982;&#x679C;&#x662F; development mode &#x7684;&#x8BDD;&#xFF0C;&#x5219;&#x4F1A;&#x5F00;&#x542F; debug &#x5DE5;&#x5177;&#xFF0C;&#x8FD0;&#x884C;&#x65F6;&#x6253;&#x5370;&#x8BE6;&#x7EC6;&#x7684;&#x9519;&#x8BEF;&#x4FE1;&#x606F;&#xFF0C;&#x4EE5;&#x53CA;&#x66F4;&#x52A0;&#x5FEB;&#x901F;&#x7684;&#x589E;&#x91CF;&#x7F16;&#x8BD1;&#x6784;&#x5EFA;</li>
</ul>
<h3 id="t6820.1 &#x73AF;&#x5883;&#x5DEE;&#x5F02;">20.1 &#x73AF;&#x5883;&#x5DEE;&#x5F02; <a href="#t6820.1 &#x73AF;&#x5883;&#x5DEE;&#x5F02;"> # </a></h3>
<ul>
<li>&#x751F;&#x4EA7;&#x73AF;&#x5883;<ul>
<li>&#x53EF;&#x80FD;&#x9700;&#x8981;&#x5206;&#x79BB; CSS &#x6210;&#x5355;&#x72EC;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x4EE5;&#x4FBF;&#x591A;&#x4E2A;&#x9875;&#x9762;&#x5171;&#x4EAB;&#x540C;&#x4E00;&#x4E2A; CSS &#x6587;&#x4EF6;</li>
<li>&#x9700;&#x8981;&#x538B;&#x7F29; HTML/CSS/JS &#x4EE3;&#x7801;</li>
<li>&#x9700;&#x8981;&#x538B;&#x7F29;&#x56FE;&#x7247;</li>
</ul>
</li>
<li>&#x5F00;&#x53D1;&#x73AF;&#x5883;<ul>
<li>&#x9700;&#x8981;&#x751F;&#x6210; sourcemap &#x6587;&#x4EF6;</li>
<li>&#x9700;&#x8981;&#x6253;&#x5370; debug &#x4FE1;&#x606F;</li>
<li>&#x9700;&#x8981; live reload &#x6216;&#x8005; hot reload &#x7684;&#x529F;&#x80FD;...</li>
</ul>
</li>
</ul>
<h3 id="t6920.2 &#x83B7;&#x53D6;mode&#x53C2;&#x6570;">20.2 &#x83B7;&#x53D6;mode&#x53C2;&#x6570; <a href="#t6920.2 &#x83B7;&#x53D6;mode&#x53C2;&#x6570;"> # </a></h3>
<pre><code class="lang-js">npm install --save-dev optimize-css-assets-webpack-plugin
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> UglifyJSPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack/lib/optimize/UglifyJsPlugin&apos;</span>);
<span class="hljs-keyword">const</span> OptimizeCssAssetsPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;optimize-css-assets-webpack-plugin&apos;</span>);
<span class="hljs-built_in">module</span>.exports=<span class="hljs-function">(<span class="hljs-params">env,argv</span>) =&gt;</span> ({
    <span class="hljs-attr">optimization</span>: {
        <span class="hljs-attr">minimizer</span>: argv.mode == <span class="hljs-string">&apos;production&apos;</span>?[            
            <span class="hljs-keyword">new</span> UglifyJSplugin({
                  <span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>,<span class="hljs-comment">//&#x542F;&#x7528;&#x7F13;&#x5B58;</span>
                  parallel: <span class="hljs-literal">true</span>,<span class="hljs-comment">// &#x4F7F;&#x7528;&#x591A;&#x8FDB;&#x7A0B;&#x8FD0;&#x884C;&#x6539;&#x8FDB;&#x7F16;&#x8BD1;&#x901F;&#x5EA6;</span>
                  sourceMap:<span class="hljs-literal">true</span><span class="hljs-comment">//&#x751F;&#x6210;sourceMap&#x6620;&#x5C04;&#x6587;&#x4EF6;</span>
            }),
            <span class="hljs-keyword">new</span> OptimizeCssAssetsWebpackPlugin({})
        ]:[]
    }
})
</code></pre>
<h3 id="t7020.3 &#x5C01;&#x88C5;log&#x65B9;&#x6CD5;">20.3 &#x5C01;&#x88C5;log&#x65B9;&#x6CD5; <a href="#t7020.3 &#x5C01;&#x88C5;log&#x65B9;&#x6CD5;"> # </a></h3>
<ul>
<li>webpack &#x65F6;&#x4F20;&#x9012;&#x7684; mode &#x53C2;&#x6570;&#xFF0C;&#x662F;&#x53EF;&#x4EE5;&#x5728;&#x6211;&#x4EEC;&#x7684;&#x5E94;&#x7528;&#x4EE3;&#x7801;&#x8FD0;&#x884C;&#x65F6;&#xFF0C;&#x901A;&#x8FC7; process.env.NODE_ENV &#x8FD9;&#x4E2A;&#x53D8;&#x91CF;&#x83B7;&#x53D6;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">...args</span>) </span>{
    <span class="hljs-keyword">if</span> (process.env.NODE_ENV == <span class="hljs-string">&apos;development&apos;</span>) {
        <span class="hljs-built_in">console</span>.log.apply(<span class="hljs-built_in">console</span>,args);
    }
}
</code></pre>
<h3 id="t7120.4 &#x62C6;&#x5206;&#x914D;&#x7F6E;">20.4 &#x62C6;&#x5206;&#x914D;&#x7F6E; <a href="#t7120.4 &#x62C6;&#x5206;&#x914D;&#x7F6E;"> # </a></h3>
<p>&#x53EF;&#x4EE5;&#x628A; webpack &#x7684;&#x914D;&#x7F6E;&#x6309;&#x7167;&#x4E0D;&#x540C;&#x7684;&#x73AF;&#x5883;&#x62C6;&#x5206;&#x6210;&#x591A;&#x4E2A;&#x6587;&#x4EF6;&#xFF0C;&#x8FD0;&#x884C;&#x65F6;&#x76F4;&#x63A5;&#x6839;&#x636E;&#x73AF;&#x5883;&#x53D8;&#x91CF;&#x52A0;&#x8F7D;&#x5BF9;&#x5E94;&#x7684;&#x914D;&#x7F6E;&#x5373;&#x53EF;</p>
<ul>
<li>webpack.base.js&#xFF1A;&#x57FA;&#x7840;&#x90E8;&#x5206;&#xFF0C;&#x5373;&#x591A;&#x4E2A;&#x6587;&#x4EF6;&#x4E2D;&#x5171;&#x4EAB;&#x7684;&#x914D;&#x7F6E;</li>
<li>webpack.development.js&#xFF1A;&#x5F00;&#x53D1;&#x73AF;&#x5883;&#x4F7F;&#x7528;&#x7684;&#x914D;&#x7F6E;</li>
<li>webpack.production.js&#xFF1A;&#x751F;&#x4EA7;&#x73AF;&#x5883;&#x4F7F;&#x7528;&#x7684;&#x914D;&#x7F6E;</li>
<li>webpack.test.js&#xFF1A;&#x6D4B;&#x8BD5;&#x73AF;&#x5883;&#x4F7F;&#x7528;&#x7684;&#x914D;&#x7F6E;...</li>
<li><a href="https://github.com/survivejs/webpack-merge">webpack-merge</a></li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> { smart } = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack-merge&apos;</span>)
<span class="hljs-keyword">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack&apos;</span>)
<span class="hljs-keyword">const</span> base = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./webpack.base.js&apos;</span>)
<span class="hljs-built_in">module</span>.exports = smart(base, {
  <span class="hljs-attr">module</span>: {
    <span class="hljs-attr">rules</span>: [],
  }
})
</code></pre>
<h2 id="t7221. &#x591A;&#x5165;&#x53E3;">21. &#x591A;&#x5165;&#x53E3; <a href="#t7221. &#x591A;&#x5165;&#x53E3;"> # </a></h2>
<p>&#x6709;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x7684;&#x9875;&#x9762;&#x53EF;&#x4EE5;&#x4E0D;&#x6B62;&#x4E00;&#x4E2A;HTML&#x9875;&#x9762;&#xFF0C;&#x4F1A;&#x6709;&#x591A;&#x4E2A;&#x9875;&#x9762;&#xFF0C;&#x6240;&#x4EE5;&#x5C31;&#x9700;&#x8981;&#x591A;&#x5165;&#x53E3;</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">const</span> HtmlWebpackPlugin=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;html-webpack-plugin&apos;</span>);
<span class="hljs-built_in">module</span>.exports={
    <span class="hljs-attr">entry</span>: {
        <span class="hljs-attr">index</span>: <span class="hljs-string">&apos;./src/index.js&apos;</span>,
        <span class="hljs-attr">login</span>: <span class="hljs-string">&apos;./src/login.js&apos;</span>
    },
    <span class="hljs-attr">output</span>: {
        <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">&apos;dist&apos;</span>),
        <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;[name].[hash].js&apos;</span>,
        <span class="hljs-attr">publicPath</span>: <span class="hljs-string">&apos;/&apos;</span>
    },
    <span class="hljs-attr">plugins</span>: [
        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">minify</span>: {
                <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>
            },
            <span class="hljs-attr">hash</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/index.html&apos;</span>,
            <span class="hljs-attr">chunks</span>: [<span class="hljs-string">&apos;index&apos;</span>],
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;index.html&apos;</span>
        }),
        <span class="hljs-keyword">new</span> HtmlWebpackPlugin({
            <span class="hljs-attr">minify</span>: {
                <span class="hljs-attr">removeAttributeQuotes</span>: <span class="hljs-literal">true</span>
            },
            <span class="hljs-attr">hash</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">chunks</span>: [<span class="hljs-string">&apos;login&apos;</span>],
            <span class="hljs-attr">template</span>: <span class="hljs-string">&apos;./src/login.html&apos;</span>,
            <span class="hljs-attr">filename</span>: <span class="hljs-string">&apos;login.html&apos;</span>
        })
    ],
}
</code></pre>
<h2 id="t7322. &#x5BF9;&#x56FE;&#x7247;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x548C;&#x4F18;&#x5316;">22. &#x5BF9;&#x56FE;&#x7247;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x548C;&#x4F18;&#x5316; <a href="#t7322. &#x5BF9;&#x56FE;&#x7247;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x548C;&#x4F18;&#x5316;"> # </a></h2>
<p><a href="https://www.npmjs.com/package/image-webpack-loader">image-webpack-loader</a>&#x53EF;&#x4EE5;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x5BF9;&#x56FE;&#x7247;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x548C;&#x4F18;&#x5316;</p>
<pre><code class="lang-js">npm install image-webpack-loader --save-dev
</code></pre>
<pre><code class="lang-diff"> {
          test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
          use: [
            &apos;file-loader&apos;,
<span class="hljs-addition">+           {</span>
<span class="hljs-addition">+             loader: &apos;image-webpack-loader&apos;,</span>
<span class="hljs-addition">+             options: {</span>
<span class="hljs-addition">+               mozjpeg: {</span>
<span class="hljs-addition">+                 progressive: true,</span>
<span class="hljs-addition">+                 quality: 65</span>
<span class="hljs-addition">+               },</span>
<span class="hljs-addition">+               optipng: {</span>
<span class="hljs-addition">+                 enabled: false,</span>
<span class="hljs-addition">+               },</span>
<span class="hljs-addition">+               pngquant: {</span>
<span class="hljs-addition">+                 quality: &apos;65-90&apos;,</span>
<span class="hljs-addition">+                 speed: 4</span>
<span class="hljs-addition">+               },</span>
<span class="hljs-addition">+               gifsicle: {</span>
<span class="hljs-addition">+                 interlaced: false,</span>
<span class="hljs-addition">+               },</span>
<span class="hljs-addition">+               webp: {</span>
<span class="hljs-addition">+                 quality: 75</span>
<span class="hljs-addition">+               }</span>
<span class="hljs-addition">+             }</span>
<span class="hljs-addition">+           },</span>
          ]
        }
</code></pre>
<h2 id="t74&#x53C2;&#x8003;">&#x53C2;&#x8003; <a href="#t74&#x53C2;&#x8003;"> # </a></h2>
<h3 id="t75&#x53C2;&#x8003;&#x6587;&#x6863;">&#x53C2;&#x8003;&#x6587;&#x6863; <a href="#t75&#x53C2;&#x8003;&#x6587;&#x6863;"> # </a></h3>
<ul>
<li><a href="https://gitee.com/zhufengpeixun/webpack-start/commits/master">webpack-start</a></li>
<li><a href="https://webpack.docschina.org/configuration/resolve/">resolve</a></li>
</ul>
<h3 id="t76&#x5E38;&#x7528;loader&#x5217;&#x8868;">&#x5E38;&#x7528;loader&#x5217;&#x8868; <a href="#t76&#x5E38;&#x7528;loader&#x5217;&#x8868;"> # </a></h3>
<p>webpack &#x53EF;&#x4EE5;&#x4F7F;&#x7528; loader &#x6765;&#x9884;&#x5904;&#x7406;&#x6587;&#x4EF6;&#x3002;&#x8FD9;&#x5141;&#x8BB8;&#x4F60;&#x6253;&#x5305;&#x9664; JavaScript &#x4E4B;&#x5916;&#x7684;&#x4EFB;&#x4F55;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; Node.js &#x6765;&#x5F88;&#x7B80;&#x5355;&#x5730;&#x7F16;&#x5199;&#x81EA;&#x5DF1;&#x7684; loader&#x3002;
<a href="https://github.com/webpack-contrib/awesome-webpack#loaders">awesome-loaders</a></p>
<h4 id="t77&#x6587;&#x4EF6;">&#x6587;&#x4EF6; <a href="#t77&#x6587;&#x4EF6;"> # </a></h4>
<ul>
<li>raw-loader &#x52A0;&#x8F7D;&#x6587;&#x4EF6;&#x539F;&#x59CB;&#x5185;&#x5BB9;&#xFF08;utf-8&#xFF09;</li>
<li>val-loader &#x5C06;&#x4EE3;&#x7801;&#x4F5C;&#x4E3A;&#x6A21;&#x5757;&#x6267;&#x884C;&#xFF0C;&#x5E76;&#x5C06; exports &#x8F6C;&#x4E3A; JS &#x4EE3;&#x7801;</li>
<li>url-loader &#x50CF; file loader &#x4E00;&#x6837;&#x5DE5;&#x4F5C;&#xFF0C;&#x4F46;&#x5982;&#x679C;&#x6587;&#x4EF6;&#x5C0F;&#x4E8E;&#x9650;&#x5236;&#xFF0C;&#x53EF;&#x4EE5;&#x8FD4;&#x56DE; data URL</li>
<li>file-loader &#x5C06;&#x6587;&#x4EF6;&#x53D1;&#x9001;&#x5230;&#x8F93;&#x51FA;&#x6587;&#x4EF6;&#x5939;&#xFF0C;&#x5E76;&#x8FD4;&#x56DE;&#xFF08;&#x76F8;&#x5BF9;&#xFF09;URL</li>
</ul>
<h4 id="t78JSON">JSON <a href="#t78JSON"> # </a></h4>
<ul>
<li>json-loader &#x52A0;&#x8F7D; JSON &#x6587;&#x4EF6;&#xFF08;&#x9ED8;&#x8BA4;&#x5305;&#x542B;&#xFF09;</li>
<li>json5-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; JSON 5 &#x6587;&#x4EF6;</li>
<li>cson-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; CSON &#x6587;&#x4EF6;</li>
</ul>
<h4 id="t79&#x8F6C;&#x6362;&#x7F16;&#x8BD1;(Transpiling)">&#x8F6C;&#x6362;&#x7F16;&#x8BD1;(Transpiling) <a href="#t79&#x8F6C;&#x6362;&#x7F16;&#x8BD1;(Transpiling)"> # </a></h4>
<ul>
<li>script-loader &#x5728;&#x5168;&#x5C40;&#x4E0A;&#x4E0B;&#x6587;&#x4E2D;&#x6267;&#x884C;&#x4E00;&#x6B21; JavaScript &#x6587;&#x4EF6;&#xFF08;&#x5982;&#x5728; script &#x6807;&#x7B7E;&#xFF09;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x89E3;&#x6790;</li>
<li>babel-loader &#x52A0;&#x8F7D; ES2015+ &#x4EE3;&#x7801;&#xFF0C;&#x7136;&#x540E;&#x4F7F;&#x7528; Babel &#x8F6C;&#x8BD1;&#x4E3A; ES5</li>
<li>buble-loader &#x4F7F;&#x7528; Bubl&#xE9; &#x52A0;&#x8F7D; ES2015+ &#x4EE3;&#x7801;&#xFF0C;&#x5E76;&#x4E14;&#x5C06;&#x4EE3;&#x7801;&#x8F6C;&#x8BD1;&#x4E3A; ES5</li>
<li>traceur-loader &#x52A0;&#x8F7D; ES2015+ &#x4EE3;&#x7801;&#xFF0C;&#x7136;&#x540E;&#x4F7F;&#x7528; Traceur &#x8F6C;&#x8BD1;&#x4E3A; ES5</li>
<li>ts-loader &#x6216; awesome-typescript-loader &#x50CF; JavaScript &#x4E00;&#x6837;&#x52A0;&#x8F7D; TypeScript 2.0+</li>
<li>coffee-loader &#x50CF; JavaScript &#x4E00;&#x6837;&#x52A0;&#x8F7D; CoffeeScript</li>
</ul>
<h4 id="t80&#x6A21;&#x677F;(Templating)">&#x6A21;&#x677F;(Templating) <a href="#t80&#x6A21;&#x677F;(Templating)"> # </a></h4>
<ul>
<li>html-loader &#x5BFC;&#x51FA; HTML &#x4E3A;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;&#x9700;&#x8981;&#x5F15;&#x7528;&#x9759;&#x6001;&#x8D44;&#x6E90;</li>
<li>pug-loader &#x52A0;&#x8F7D; Pug &#x6A21;&#x677F;&#x5E76;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x51FD;&#x6570;</li>
<li>jade-loader &#x52A0;&#x8F7D; Jade &#x6A21;&#x677F;&#x5E76;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x51FD;&#x6570;</li>
<li>markdown-loader &#x5C06; Markdown &#x8F6C;&#x8BD1;&#x4E3A; HTML</li>
<li>react-markdown-loader &#x4F7F;&#x7528; markdown-parse parser(&#x89E3;&#x6790;&#x5668;) &#x5C06; Markdown &#x7F16;&#x8BD1;&#x4E3A; React &#x7EC4;&#x4EF6;</li>
<li>posthtml-loader &#x4F7F;&#x7528; PostHTML &#x52A0;&#x8F7D;&#x5E76;&#x8F6C;&#x6362; HTML &#x6587;&#x4EF6;</li>
<li>handlebars-loader &#x5C06; Handlebars &#x8F6C;&#x79FB;&#x4E3A; HTML</li>
<li>markup-inline-loader &#x5C06;&#x5185;&#x8054;&#x7684; SVG/MathML &#x6587;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A; HTML&#x3002;&#x5728;&#x5E94;&#x7528;&#x4E8E;&#x56FE;&#x6807;&#x5B57;&#x4F53;&#xFF0C;&#x6216;&#x5C06; CSS &#x52A8;&#x753B;&#x5E94;&#x7528;&#x4E8E; SVG &#x65F6;&#x975E;&#x5E38;&#x6709;&#x7528;</li>
</ul>
<h4 id="t81&#x6837;&#x5F0F;">&#x6837;&#x5F0F; <a href="#t81&#x6837;&#x5F0F;"> # </a></h4>
<ul>
<li>style-loader &#x5C06;&#x6A21;&#x5757;&#x7684;&#x5BFC;&#x51FA;&#x4F5C;&#x4E3A;&#x6837;&#x5F0F;&#x6DFB;&#x52A0;&#x5230; DOM &#x4E2D;</li>
<li>css-loader &#x89E3;&#x6790; CSS &#x6587;&#x4EF6;&#x540E;&#xFF0C;&#x4F7F;&#x7528; import &#x52A0;&#x8F7D;&#xFF0C;&#x5E76;&#x4E14;&#x8FD4;&#x56DE; CSS &#x4EE3;&#x7801;</li>
<li>less-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; LESS &#x6587;&#x4EF6;</li>
<li>sass-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; SASS/SCSS &#x6587;&#x4EF6;</li>
<li>postcss-loader &#x4F7F;&#x7528; PostCSS &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; CSS/SSS &#x6587;&#x4EF6;</li>
<li>stylus-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; Stylus &#x6587;&#x4EF6;</li>
</ul>
<h4 id="t82&#x6E05;&#x7406;&#x548C;&#x6D4B;&#x8BD5;(Linting &amp;&amp; Testing)">&#x6E05;&#x7406;&#x548C;&#x6D4B;&#x8BD5;(Linting &amp;&amp; Testing) <a href="#t82&#x6E05;&#x7406;&#x548C;&#x6D4B;&#x8BD5;(Linting &amp;&amp; Testing)"> # </a></h4>
<ul>
<li>mocha-loader &#x4F7F;&#x7528; mocha &#x6D4B;&#x8BD5;&#xFF08;&#x6D4F;&#x89C8;&#x5668;/NodeJS&#xFF09;</li>
<li>eslint-loader PreLoader&#xFF0C;&#x4F7F;&#x7528; ESLint &#x6E05;&#x7406;&#x4EE3;&#x7801;</li>
<li>jshint-loader PreLoader&#xFF0C;&#x4F7F;&#x7528; JSHint &#x6E05;&#x7406;&#x4EE3;&#x7801;</li>
<li>jscs-loader PreLoader&#xFF0C;&#x4F7F;&#x7528; JSCS &#x68C0;&#x67E5;&#x4EE3;&#x7801;&#x6837;&#x5F0F;</li>
<li>coverjs-loader PreLoader&#xFF0C;&#x4F7F;&#x7528; CoverJS &#x786E;&#x5B9A;&#x6D4B;&#x8BD5;&#x8986;&#x76D6;&#x7387;</li>
</ul>
<h4 id="t83&#x6846;&#x67B6;(Frameworks)">&#x6846;&#x67B6;(Frameworks) <a href="#t83&#x6846;&#x67B6;(Frameworks)"> # </a></h4>
<ul>
<li>vue-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; Vue &#x7EC4;&#x4EF6;</li>
<li>polymer-loader &#x4F7F;&#x7528;&#x9009;&#x62E9;&#x9884;&#x5904;&#x7406;&#x5668;(preprocessor)&#x5904;&#x7406;&#xFF0C;&#x5E76;&#x4E14; require() &#x7C7B;&#x4F3C;&#x4E00;&#x7B49;&#x6A21;&#x5757;(first-class)&#x7684; Web &#x7EC4;&#x4EF6;</li>
<li>angular2-template-loader &#x52A0;&#x8F7D;&#x548C;&#x8F6C;&#x8BD1; Angular &#x7EC4;&#x4EF6;</li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
